vue3 stup 钩子函数示例

Vue 3 中的`setup`函数是在组件创建之前执行的函数，它具有以下特点：

- `setup`函数是一个普通的JavaScript函数，它接收两个参数：`props`和`context`。
- `props`是一个包含所有属性的对象，您可以在函数中使用它来访问组件属性。
- `context`是一个包含有关组件上下文的对象，例如`attrs`（非响应式属性）、`slots`（插槽内容）、`emit`（触发事件）等。
- `setup`函数必须返回一个对象，该对象包含组件的状态和方法，这些状态和方法将被暴露给组件模板中的表达式和指令。

下面是一个简单的示例，演示如何在`setup`函数中使用`props`和`context`来创建组件状态和方法：

import { ref } from 'vue';

export default {
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  },
  setup(props, context) {
    // 创建响应式状态
    const count = ref(0);

    // 定义组件方法
    function increment() {
      count.value++;
    }

    // 返回状态和方法
    return {
      count,
      increment
    };
  }
}

在这个示例中，我们使用`ref`函数创建了一个名为`count`的响应式状态，并定义了一个名为`increment`的方法，它将`count`的值增加1。我们还使用`props`对象访问了组件属性中的`message`属性，并使用`context`对象访问了`emit`方法，以便我们可以在方法中触发事件。

最后，我们返回了一个包含`count`和`increment`的对象，这些都将被暴露给组件模板中的表达式和指令。