vue3 setup 怎么用
时间: 2023-11-17 14:46:51 浏览: 41
Vue 3 的 Composition API 提供了一种新的组件编写方式,其中 `setup` 函数是一个必需的选项,它代替了 Vue 2 中的 `data`、`computed`、`methods` 等选项。`setup` 函数在组件创建之前调用,并且接收两个参数:`props` 和 `context`。
下面是一个简单的示例,展示了如何使用 `setup` 函数:
```javascript
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 声明响应式数据
const count = ref(0);
// 定义方法
function increment() {
count.value++;
}
// 返回数据和方法
return {
count,
increment,
};
},
};
</script>
```
在这个示例中,我们使用 `ref` 创建了一个名为 `count` 的响应式数据,并在 `increment` 方法中更新该数据。最后,在 `return` 语句中将 `count` 和 `increment` 返回,使其在模板中可用。
需要注意的是,在 `setup` 函数内部,我们不再使用 `this` 来访问组件实例,而是直接使用声明的变量。此外,由于 `setup` 是在组件创建之前执行的,因此它不具备响应式能力,需使用 Vue 3 提供的函数来声明响应式数据。