Vue3中setup方法的用法详解

在 Vue3 中，我们使用 setup 方法来替代旧版的 created 和 beforeCreate 方法。而且，setup 方法是 Vue3 的核心特性之一。

setup 方法的基本语法

setup 方法接收两个参数：props 和 context。

setup(props, context) {
  // code here
}

props：包含传入到组件中的 props 数据。
context：包含一些 Vue3 暴露出来的 API，例如 $refs、$slots 等。

在 setup 方法中，我们可以访问到 props 和 context，然后返回一个对象，这个对象会作为组件实例的属性注入到组件中。

setup 返回的对象

setup 返回的对象有以下属性：

data: 返回组件实例的 data，可以是一个对象、或者一个函数，函数返回一个对象。
methods: 返回组件实例的 methods，是一个包含多个方法的对象。
computed: 返回组件实例的 computed，是一个包含多个计算属性的对象。
watch: 返回组件实例的 watch，是一个包含多个观察者的对象。

示例一：使用 setup 创建计数器

下面是一个使用 setup 方法创建的计数器组件：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  setup() {
    // 定义初始值
    const count = Vue.ref(0);

    // 定义增加数量的函数
    const addCount = () => {
      count.value++;
    };

    // 返回对象
    return { count, addCount };
  }
}
</script>

在示例中，我们使用 const 定义了一个计数器 count，并且一并定义了一个 addCount 方法。最后，我们返回了这两个属性，这两个属性会被注入到组件实例中。

示例二：使用 setup 中修改数据

在 setup 中，我们只能够读取响应式数据，但是不能够修改响应式数据。一旦你要修改数据，你需要使用 Vue3 提供的 API。

比如下面这个例子会报错：

setup(props, context) {
  const name = Vue.ref('Lucy');
  // 这里尝试修改 name 的值，会报错
  name = 'James';
  return { name };
}

因为你无法通过直接给变量赋值的方式来改变数据，记住 Vue3 框架本身会防止直接给变量赋值的方式来改变数据。正确的使用方式是：

setup(props, context) {
  const name = Vue.ref('Lucy');

  // 改变数据的方式一：修改 value 属性
  name.value = 'James';

  // 改变数据的方式二：使用 Vue3 的 API
  Vue.set(name, 'value', 'James');

  return { name };
}