Vue3 中 setup、ref 和 reactive 的使用方法

在 Vue3 的世界里，setup、ref 和 reactive 是三个非常重要且基础的概念，掌握它们对于构建高效的 Vue 应用至关重要。

首先来看看 setup。setup 是 Vue3 新增的一个组件选项，它是一个函数，在组件的 beforeCreate 钩子函数之前被调用。setup 函数接收两个参数：props 和 context。props 是组件接收到的属性，context 包含了 attrs、slots 和 emit 等对象，提供了访问组件上下文信息的途径。setup 函数的返回值可以是一个对象，对象中的属性和方法会暴露给模板使用。例如：

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');
    const sayHello = () => {
      console.log(message.value);
    };
    return {
      message,
      sayHello
    };
  }
};

在模板中就可以直接使用 message 和 sayHello 方法。

接着说说 ref。ref 用于创建一个响应式的数据变量。它接受一个初始值，并返回一个包含该值的响应式对象。这个对象有一个 .value 属性来访问和修改实际的值。当 .value 发生变化时，Vue 会自动检测到并更新与之绑定的 DOM 元素。就像上面例子中的 message，它就是一个 ref 创建的响应式变量。在模板中使用时，不需要写 .value，Vue 会自动帮我们处理。

最后讲讲 reactive。reactive 用于创建一个响应式的对象或数组。它接收一个普通对象或数组，返回一个响应式代理对象。与 ref 不同的是，使用 reactive 创建的对象直接访问属性即可，不需要 .value。例如：

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });
    const updateUser = () => {
      user.name = 'Jane';
      user.age++;
    };
    return {
      user,
      updateUser
    };
  }
};

在模板中直接使用 user.name 和 user.age 就能显示相应的值，调用 updateUser 方法会自动更新视图。

setup 为组件提供了一个初始化的环境，ref 适合处理单个响应式数据，reactive 则用于创建复杂的响应式对象和数组。熟练掌握它们的使用方法，能让我们在 Vue3 的开发中更加得心应手。