异常教程
vue3 setup（长文解析）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在前端开发领域，Vue.js 作为最受欢迎的 JavaScript 框架之一，始终以简洁易用的特性吸引着开发者。Vue 3 的发布不仅带来了性能和功能上的提升，更引入了 setup 这一革命性概念，彻底改变了组件的编写方式。无论是编程初学者还是有一定经验的开发者，理解 setup 都是掌握 Vue 3 组合式 API 的关键。本文将从基础到实践，系统性地讲解 setup 的核心概念、使用方法及应用场景，帮助读者快速上手并灵活运用这一功能。
一、从 Options API 到 Setup 的演变
1.1 Options API 的局限性
在 Vue 2 中，开发者通过 Options API（如 data、methods、computed 等选项）组织组件逻辑。这种模式虽然直观，但在以下场景中显露出不足：
- 代码复用困难：当多个组件需要共享逻辑时，需借助混入（Mixins）或高阶组件，但容易导致命名冲突。
- 逻辑分散：数据、方法、生命周期等分散在不同选项中，难以维护。
- 缺乏 TypeScript 支持：类型推导不够直观，增加了大型项目中的开发成本。
比喻：
这就像在一个混乱的厨房里，所有食材、工具和食谱都堆在同一个抽屉中，虽然能找到所需物品，但效率低下且容易出错。
1.2 Setup 的诞生与优势
Vue 3 的 setup 函数作为组合式 API 的核心入口，解决了上述问题：
- 集中逻辑：将组件的响应式数据、计算属性、生命周期钩子等集中在一个函数中。
- 增强可复用性：通过自定义组合函数（Composition Functions），可将逻辑封装成可复用的模块。
- 更好的 TypeScript 支持：类型推导更清晰，减少开发中的类型错误。
核心语法：
<script setup>
// 这里编写组件逻辑
</script>
或通过 setup 函数显式声明：
<script>
export default {
setup() {
// 逻辑代码
return { /* 需要暴露给模板的变量或方法 */ }
}
}
</script>
二、Setup 的核心概念与 API
2.1 响应式数据的创建：ref 与 reactive
Vue 3 中，数据响应性的管理主要通过 ref 和 reactive 实现。
2.1.1 ref：单值响应化
ref 用于包装单个值（如数字、字符串、布尔值等），使其成为响应式对象。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++; // 更新值后视图自动更新
比喻：
ref 像一个带“魔法封印”的盒子，当值被修改时，封印会触发视图的重新渲染。
2.1.2 reactive：对象/数组响应化
reactive 用于创建整个对象或数组的响应式引用，无需通过 .value 访问。
import { reactive } from 'vue';
const state = reactive({
name: 'Alice',
age: 25
});
state.name = 'Bob'; // 直接修改属性
关键区别：
| 特性 | ref | reactive |
|---------------|---------------------------|---------------------------|
| 适用场景 | 单值（如数字、布尔值） | 复杂对象或数组 |
| 访问方式 | 需 .value | 直接访问属性 |
| 性能 | 对简单值更高效 | 对复杂结构更高效 |
2.2 生命周期钩子的使用
在 setup 中，Vue 3 提供了 onMounted、onUnmounted 等组合式 API 替代 Vue 2 的生命周期钩子。
import { onMounted } from 'vue';
onMounted(() => {
console.log('组件已挂载');
});
生命周期钩子列表：
| 钩子名称 | 对应 Vue 2 生命周期 |
|-------------------------|---------------------------|
| onMounted | mounted |
| onUnmounted | destroyed |
| onBeforeUpdate | beforeUpdate |
2.3 计算属性与方法：computed 和 watch
2.3.1 computed：声明计算属性
import { computed } from 'vue';
const fullName = computed(() => {
return `${state.firstName} ${state.lastName}`;
});
2.3.2 watch：监听数据变化
import { watch } from 'vue';
watch(count, (newVal, oldVal) => {
console.log('计数器从', oldVal, '变为', newVal);
});
三、实战案例：构建一个计数器组件
3.1 基础版：使用 ref 和 watch
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal) => {
console.log('当前计数值：', newVal);
});
</script>
<template>
<button @click="count++">增加</button>
<p>当前计数：{{ count }}</p>
</template>
3.2 进阶版：结合 reactive 和 computed
<script setup>
import { reactive, computed } from 'vue';
const state = reactive({
count: 0,
incrementAmount: 1
});
const doubleCount = computed(() => state.count * state.incrementAmount);
</script>
<template>
<button @click="state.count += state.incrementAmount">增加</button>
<p>当前计数：{{ doubleCount }}</p>
</template>
四、常见问题与最佳实践
4.1 为什么 setup 中不能直接使用 this？
在 setup 中，this 的指向与 Vue 2 不同。Vue 3 强制开发者通过显式参数或 API 访问组件实例，以避免隐式上下文带来的混乱。
4.2 如何实现跨组件逻辑复用？
通过创建组合函数（如 useCounter.js）：
// useCounter.js
import { ref } from 'vue';
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
在组件中使用：
<script setup>
import { useCounter } from './useCounter';
const { count, increment } = useCounter();
</script>
4.3 setup 的执行时机
setup 在组件初始化时调用，早于 beforeCreate 和 created 生命周期钩子。
五、结论
Vue 3 的 setup 函数通过组合式 API，重构了组件开发的范式，使得代码逻辑更清晰、复用性更强。无论是通过 ref 和 reactive 管理响应式数据，还是借助 watch 和 computed 实现复杂逻辑，开发者都能在 setup 中找到高效解决方案。
对于初学者，建议从简单案例入手，逐步理解组合式 API 的设计理念；中级开发者则可通过封装组合函数，提升代码的可维护性。随着实践的深入，setup 必将成为 Vue 3 开发的核心工具，帮助开发者构建出更优雅、高效的前端应用。
通过本文的讲解，希望读者能建立起对 vue3 setup 的系统性认知，并在实际项目中灵活运用其特性。