`setup` 函数初体验：Vue3 Composition API 的入口点

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 Vue3 中，setup 函数是一个新的组件选项，它是 Composition API 的入口点。setup 函数在组件实例被创建之后、初始化生命周期钩子之前被调用。

setup 函数的特点

1. 执行时机：setup 函数在组件实例化后立即执行，此时组件的数据和方法还未初始化。
2. 返回值：setup 函数的返回值会被暴露给模板和其他选项式 API 使用。
3. 参数：setup 函数接收两个参数，第一个是组件的 props，第二个是 context 对象，包含 attrs、slots 和 emit 等。

使用 setup 函数

下面是一个简单的 setup 函数使用示例：

<template>
<div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup(props, context) {
// 使用 ref 创建响应式数据
const message = ref('Hello, Vue3 with setup!');

// 可以访问 props 和 context
console.log(props);
console.log(context);

// 返回的数据将在模板中可用
return {
message
};
}
};
</script>

在这个例子中，我们使用了 ref 函数来创建一个响应式的 message 数据，并在 setup 函数中返回它，使其在模板中可用。

setup 函数的优势

• 逻辑复用：通过 setup 函数，可以将组件的逻辑提取到可复用的函数中。
• 更好的类型推断：setup 函数与 TypeScript 结合使用时，可以提供更好的类型推断。
• 更清晰的代码结构：setup 函数使得组件的逻辑更加集中和清晰。

setup 函数是 Vue3 中 Composition API 的核心部分，它提供了一种新的方式来组织和编写组件逻辑，使得代码更加模块化和可维护。