Vue 3 引入了 Composition API，这是一组基于函数的 API，提供了一种更灵活的方式来组织组件逻辑。setup 函数是 Composition API 的核心，它允许开发者在组件中使用 Composition API 的功能。本文将详细介绍 setup 函数的两种编写方式：1. 使用 setup() 函数，2. 使用 <script setup lang="ts"> 语法糖。
1. 使用 setup() 函数
在 Vue 3 中，setup 函数是每个组件的入口点，它在组件实例创建之前被调用。setup 函数接收两个参数：props 和 context，分别代表传入组件的属性和组件的上下文。
示例代码
<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script lang="ts">
import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log('Component is mounted');});return { count, increment };},
};
</script>
代码解释
定义响应式数据:
const count = ref(0);
使用 ref 函数创建一个响应式引用 count，初始值为 0。
定义方法:
const increment = () => {count.value++;
};
定义一个方法 increment，用于增加 count 的值。
生命周期钩子:
onMounted(() => {console.log('Component is mounted');
});
使用 onMounted 生命周期钩子，在组件挂载完成后执行回调函数。
返回值:
return { count, increment };
setup 函数的返回值会被模板访问，这里返回 count 和 increment，使它们在模板中可用。
2. 使用 <script setup lang="ts"> 语法糖
Vue 3.2 引入了 <script setup> 语法糖，它简化了 setup 函数的使用，使得代码更加简洁和易于理解。
示例代码
<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';const count = ref(0);const increment = () => {count.value++;
};onMounted(() => {console.log('Component is mounted');
});
</script>
代码解释
定义响应式数据:
const count = ref(0);
直接在 <script setup> 中定义响应式数据 count。
定义方法:
const increment = () => {count.value++;
};
直接在 <script setup> 中定义方法 increment。
生命周期钩子:
onMounted(() => {console.log('Component is mounted');
});
直接在 <script setup> 中使用生命周期钩子 onMounted。
优势
- 更简洁的代码：不需要显式返回
setup函数的返回值，模板可以直接访问定义的响应式数据和方法。 - 更好的类型推断：
<script setup>提供了更好的 TypeScript 类型推断支持。
总结
Vue 3 的 setup 函数提供了一种更灵活和强大的方式组织组件逻辑。通过 setup() 函数和 <script setup lang="ts"> 语法糖，开发者可以更高效地编写组件代码。<script setup> 语法糖进一步简化了代码，使得组件更加简洁和易于维护。希望本文能帮助你更好地理解和使用 Vue 3 的 setup 函数。
