Vue 3 引入了 Composition API，这是一种新的组件编写方式，旨在提供更好的逻辑复用和代码组织。setup() 函数是 Composition API 的入口点，它在组件实例创建之前被调用，并且是响应式系统的上下文。本文将介绍 setup() 函数的作用，并使用 Vue 3 的 setup 语法糖提供示例代码。
setup() 函数的作用
setup() 函数是 Composition API 的核心，它提供了以下功能：
-
响应式状态：在
setup()函数中声明的变量会自动被转换为响应式状态。 -
生命周期钩子：
setup()函数内部可以访问组件的生命周期钩子，如onMounted、onUpdated和onUnmounted。 -
模板引用：
setup()函数可以访问模板中的 refs，并且可以直接在模板中使用setup()中定义的响应式状态和方法。 -
Props 和 Emits：
setup()函数是处理 props 和 emits 的地方，可以直接在其中定义和使用。
示例代码
使用 setup 语法糖
在 Vue 3 中，使用 <script setup> 语法糖可以使 setup() 函数的使用更加简洁。
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 响应式状态
const count = ref(0);
// 生命周期钩子
onMounted(() => {
console.log('Component is mounted');
});
// 方法
function increment() {
count.value++;
}
</script>
在这个例子中，我们创建了一个响应式变量 count，并定义了一个 increment 方法来增加 count 的值。我们还使用了 onMounted 生命周期钩子来在组件挂载后打印一条消息。
使用 setup() 函数
如果你需要更细粒度的控制，或者想要在 setup() 函数中进行更复杂的逻辑处理，你可以显式地定义 setup() 函数。
<template>
<div>
<p>{{ greeting }}</p>
</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
// 响应式状态
const name = ref('Vue 3');
// 计算属性
const greeting = computed(() => `Hello, ${name.value}!`);
// 生命周期钩子
onMounted(() => {
console.log('Component is mounted');
});
// 返回的对象中的属性和方法可以在模板中直接使用
return {
greeting
};
}
};
</script>
在这个例子中，我们定义了一个响应式变量 name，并创建了一个计算属性 greeting。我们还使用了 onMounted 生命周期钩子，并在 setup() 函数的返回对象中暴露了 greeting，使其可以在模板中使用。
总结
setup() 函数是 Vue 3 Composition API 的入口点，它允许我们在组件的生命周期内声明响应式状态、访问生命周期钩子、定义方法和计算属性。使用 <script setup> 语法糖可以进一步简化 setup() 函数的使用，使得组件的编写更加简洁和直观。通过上述示例代码，你可以开始尝试将这些技巧应用到你自己的 Vue 3 项目中。