Vue3从零开始——掌握setup、ref和reactive函数的奥秘

Vue3中的`setup`、`ref`和`reactive`是构建组件的基础工具，它们分别负责初始化状态管理、创建响应式数据和模板绑定。

1. **setup函数**：这是Vue3引入的新特性，用于将组件的大部分业务逻辑抽取到一个独立的模块。在这个函数中，你可以声明`const`或`let`变量，并使用`ref`或`reactive`来创建响应式的状态。`setup`返回一个对象，这个对象会被传给`setupContext`，供组件内部访问。

setup() {
  const count = ref(0); // 创建一个响应式的count变量
  function increment() { count.value++ } // 使用值属性来改变其值
  return { count, increment };
}

2. **ref**：这是一个创建响应式变量的API，它既可以存储原始类型如数字和字符串，也可以存储复杂类型。`ref`返回的是一个包装对象，包含当前值和一个`value`属性可以直接设置新值。

3. **reactive**：这是对整个对象或数组进行响应式封装的函数，所有嵌套的对象和数组也会被监视。当你修改这些响应式对象时，视图会自动更新。通常配合`toRef`或`toRefs`来处理深度嵌套的数据结构。

import { reactive } from 'vue';
const user = reactive({ name: 'John', age: 30 });
// 修改响应式对象：user.name = 'Jane'