什么是setup?
在Vue.js 3中,setup
是一个新的组件选项,用于设置组件的初始状态和逻辑。
通过 setup
函数,可以使用 Composition API 的方式组织组件的状态和方法,增强了代码的可读性和灵活性。
setup
函数接收 props
和 context
作为参数,返回一个对象,其中包含在模板中可用的响应式状态和方法。这种方式使得组件的结构更加清晰,同时支持更好的逻辑复用。
setup的优点
使用setup和Composition API可以使开发更灵活、清晰、可维护,并且能够更好地满足大型项目的需求。
-
更灵活的组织代码结构: setup 允许开发者使用 Composition API 来组织和重用组件逻辑,使得代码结构更加清晰和模块化。
-
更好的 TypeScript 支持: setup 的使用有助于更好地结合 TypeScript,提供更强大的类型推断和类型检查。
-
更直观的响应式状态管理: 使用 ref 和 reactive 创建的响应式状态更直观,而且在 setup 中声明的状态可以在模板中直接使用。
-
更易于测试: setup 使得组件内部的逻辑可以更容易地进行单元测试,因为你可以在测试中直接访问 setup 返回的状态和方法。
-
更好的逻辑复用: 使用 Composition API 可以更方便地将逻辑进行抽象和复用,有助于提高代码的可维护性和可读性。
setup的生命周期钩子
setup(){}
下面的组件使用setup选项和Composition API来定义其状态和逻辑。
通过ref创建了一个响应式状态count,并使用reactive创建了包含消息的响应式对象data。
使用computed创建了计算属性doubleCount和reversedMessage,分别展示了计算值和反转消息字符串。
生命周期钩子函数onMounted和onBeforeUnmount被用于在组件挂载和即将销毁时执行相应的逻辑。
<template>
<div>
<!-- 显示 count 的值 -->
<p>Count: {{ count }}</p>
<!-- 显示 doubleCount 的值 -->
<p>Double Count: {{ doubleCount }}</p>
<!-- 显示反转后的消息 -->
<p>Reversed Message: {{ reversedMessage }}</p>
<!-- 点击按钮触发 increment 方法 -->
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式状态
const count = ref(0);
// 使用 reactive 创建响应式对象
const data = reactive({
message: 'Hello, Vue!'
});
// 使用 computed 创建计算属性
const doubleCount = computed(() => count.value * 2);
// 使用生命周期钩子函数,在组件被挂载时执行
onMounted(() => {
console.log('Component is mounted');
});
// 使用生命周期钩子函数,在组件即将被销毁时执行
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
// 定义一个方法,点击按钮时触发
function increment() {
count.value++;
}
// 创建一个 computed 属性,反转消息字符串
const reversedMessage = computed(() => data.message.split('').reverse().join(''));
// 返回状态和方法,将会在模板中可用
return {
count,
doubleCount,
reversedMessage,
increment
};
}
}
</script>
<script setup>
<script setup>
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script>
语法,它具有更多优势:
- 更少的样板内容,更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和自定义事件。
- 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
- 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
<template>
<div>
<!-- 显示 count 的值 -->
<p>Count: {{ count }}</p>
<!-- 显示 doubleCount 的值 -->
<p>Double Count: {{ doubleCount }}</p>
<!-- 显示反转后的消息 -->
<p>Reversed Message: {{ reversedMessage }}</p>
<!-- 点击按钮触发 increment 方法 -->
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
// 使用 ref 创建响应式状态
const count = ref(0);
// 使用 reactive 创建响应式对象
const data = reactive({
message: 'Hello, Vue!'
});
// 使用 computed 创建计算属性
const doubleCount = computed(() => count.value * 2);
// 使用生命周期钩子函数,在组件被挂载时执行
onMounted(() => {
console.log('Component is mounted');
});
// 使用生命周期钩子函数,在组件即将被销毁时执行
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
// 定义一个方法,点击按钮时触发
function increment() {
count.value++;
}
// 创建一个 computed 属性,反转消息字符串
const reversedMessage = computed(() => data.message.split('').reverse().join(''));
</script>