vue3 setup怎么使用

Vue 3 的 setup 是在组件中使用的一个新选项，它用于替代 Vue 2.x 中的生命周期钩子。通过 setup 函数，我们可以访问组件的属性、方法和生命周期等。

在使用 Vue 3 的 setup 函数时，需要注意以下几点：

1. setup 函数是一个普通的 JavaScript 函数，它接收两个参数：props 和 context。
- props 是组件的属性集合，可以通过解构赋值的方式获取具体的属性。
- context 是一个上下文对象，包含了组件实例的一些方法和属性。

2. setup 函数可以返回一个对象，该对象中的属性和方法将会被注入到组件作用域中，并可以在模板中使用。

下面是一个示例代码来演示如何使用 Vue 3 的 setup：

<script>
import { reactive } from 'vue';

export default {
  props: ['message'],
  
  setup(props) {
    // 使用 reactive 函数创建一个响应式对象
    const data = reactive({
      count: 0
    });

    // 定义一个自增函数
    const increment = () => {
      data.count++;
    };

    return {
      data,
      increment
    };
  }
};
</script>

在这个示例中，我们创建了一个名为 data 的响应式对象，并定义了一个名为 increment 的自增函数。在模板中，我们可以通过 `{{ data.count }}` 来显示 count 的值，并通过 `@click="increment"` 来触发自增函数。