Vue3 组合式 API

了解 Vue3 的 Composition API：setup()、ref、reactive · 难度：进阶 · +20XP

Vue3 的两种写法

Vue3 提供了两种写组件的方式：

选项式 API	组合式 API（Composition API）
data、methods、computed 分开写	所有逻辑集中在 setup() 里
简单直观，适合新手	灵活强大，适合复杂项目
前面课程都在用这种	本课学这种

两种写法可以混用！你可以在一个组件中用选项式，另一个中用组合式。

setup() + ref

ref() 把一个普通值变成"响应式"——值变了页面就自动更新：

setup() {
  const count = ref(0);           // 创建响应式变量，初始值 0
  function increment() {
    count.value++;                // ⚠️ JS 里必须用 .value 访问
  }
  return { count, increment };    // 返回给模板使用
}

模板中直接用 {{ count }}（不需要 .value，Vue 自动解包）。

reactive — 整个对象响应式

ref 适合单个值，reactive 适合整个对象：

const user = reactive({
  name: "张三",
  age: 25,
  skills: ["Vue", "React"]
});
function birthday() {
  user.age++;    // reactive 不需要 .value
}

ref vs reactive

ref	reactive
包装单个值（数字、字符串、布尔）	包装整个对象
JS 中用 .value	直接访问属性
可以整个替换：count.value = 10	不能整体替换

动手试试

1. 右边用组合式 API 写的计数器，和之前的写法对比一下
2. 试着添加一个 reset 按钮
3. 试着用 reactive 改写这个例子