vue3中的setup

在 Vue 3 中，setup 是一个新的组件选项，它允许你使用 Composition API 来组织你的组件逻辑。setup 函数是一个组件生命周期钩子之前运行的函数，它接收两个参数：props 和 context。

setup 函数参数

1. props: 组件的属性，是一个响应式的对象，与 this.$props 类似。
2. context: 一个对象，包含了组件的 attrs、slots、emit 等属性。

使用 setup

在 setup 函数中，你可以使用 ref、reactive、computed 等函数来创建响应式的数据和方法。

例如：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建一个响应式的引用
    const count = ref(0);

    // 定义一个方法来增加计数器的值
    const increment = () => {
      count.value++;
    };

    // 返回给模板的数据和方法
    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，我们创建了一个响应式的引用 count，并用一个函数 increment 来改变它的值。这些都在 setup 函数中完成，并通过返回值暴露给模板。

响应式状态和函数

ref 和 reactive 允许你创建响应式的数据。ref 用于单个值，而 reactive 用于对象或数组。当这些响应式数据改变时，Vue 会自动更新 DOM。

computed 可以用来创建计算属性，它基于其他响应式数据动态计算值。

访问组件实例

在 setup 函数中，你不能直接访问 this 来获取组件实例。如果需要访问 this，你应该使用 context 参数中的 attrs、slots 或 emit。

与 Options API 的关系

Composition API 并不替代 Options API，而是提供了一个新的、更灵活的方式来组织和复用组件逻辑。Vue 3 仍然支持 Options API，但 Composition API 提供了更好的逻辑复用性和更简洁的代码结构。

总的来说，setup 函数是 Vue 3 Composition API 的核心部分，它让你能更直观地组织和管理你的组件逻辑，尤其是当组件变得复杂时。