vue3 setup 语法糖
时间: 2023-10-10 19:14:19 浏览: 23
Vue3 中的 `setup()` 函数是一个新的语法糖,它被用来替代 Vue2 中的 `beforeCreate()` 和 `created()` 钩子函数,用于在组件实例化之前完成一些工作。
`setup()` 函数接收两个参数:props 和 context。其中 props 是组件的属性,context 是一个包含了一些组件实例所需方法和属性的对象。
下面是一个简单的例子:
```vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props, context) {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment,
};
},
};
</script>
```
在上面的例子中,我们使用了 `ref()` 函数来创建了一个响应式数据 `count`,并将其作为 `setup()` 函数的返回值。同时我们也定义了一个 `increment()` 方法来增加 `count` 的值。在模板中,我们使用了插值语法来显示 `count` 的值,并通过 `@click` 事件监听器来调用 `increment()` 方法。
总的来说,`setup()` 函数提供了一种更加简洁和灵活的方式来处理组件的逻辑,并且能够更好地利用 Vue3 中的响应式系统。
阅读全文