核心目标深入理解从 Options API 到 Composition API 的范式转变掌握逻辑复用Composables的高级技巧建立数据驱动的代码组织思维。 本章核心知识点知识点说明难度设计动机为什么需要从 Options 转向 Composition⭐生命周期Setup 中的钩子函数及其顺序⭐⭐逻辑复用编写高质量的 Composables (useXxx)⭐⭐⭐⭐响应式辅助toRefs,toRef,unref,isRef⭐⭐⭐性能进阶shallowRef,triggerRef,markRaw⭐⭐⭐⭐3.1 范式转变解决“面条代码”3.1.1 Options API 的局限性在 Vue 2 中处理同一个业务逻辑如搜索功能的代码会被拆分到data,methods,computed中。当一个组件涉及 10 个业务逻辑时开发者需要不停地上下滚动屏幕代码难以维护且逻辑难以跨组件复用。3.1.2 Composition API 的优势按逻辑组织相关的代码写在一起甚至提取到独立的.ts文件中。更好的类型推断对 TypeScript 的支持是原生且完美的。极致的复用性通过函数组合而非 Minxin 继承。3.2 逻辑复用之王Composables (useXxx)3.2.1 编写规范Composable 函数应当以use开头约定俗成。输入参数可以是响应式的输出通常是一个包含多个ref的对象。内部可以包含生命周期钩子它会在调用处的组件中自动绑定。// useMouse.tsimport{ref,onMounted,onUnmounted}fromvueexportfunctionuseMouse(){constxref(0)constyref(0)constupdate(e:MouseEvent){x.valuee.pageX y.valuee.pageY}onMounted(()window.addEventListener(mousemove,update))onUnmounted(()window.removeEventListener(mousemove,update))return{x,y}}3.3 响应式全家桶不仅仅是 ref3.3.1 toRefs 与 toRef直接解构并修改reactive对象会破坏响应式。toRefs能将对象的所有属性转为ref从而支持解构。constpersonreactive({name:张三,age:18})const{name,age}toRefs(person)// 此时 name 和 age 都是独立引用的 ref3.3.2 unref 与 isRefisRef检查值是否为 ref。unref如果参数是 ref返回内部值否则返回参数本身相当于val isRef(v) ? v.value : v。常用于工具函数中处理参数归一化。3.4 性能优化的暗门Shallow 系统3.4.1 shallowRef 与 shallowReactive背景Vue 默认的响应式是“深度”的对于一个有 1000 个层级的庞大对象Vue 会递归遍历。优化shallowRef只监听.value的指向变化。如果你只是展示大数据如从后端拿到的 1 万条清单使用shallowRef能节省巨大的 CPU 初始化开销。3.4.2 markRaw禁止一个对象被响应式转换。通常用于存储第三方库实例如 ECharts、Mapbox因为它们的内部属性极其庞大被 Vue 代理后会导致严重的卡顿。3.5 最佳实践如何写出优雅的 setup保持 Setup 简单复杂的业务逻辑一律抽离成useXxx函数。避免在 setup 中使用 this在组合式 API 中this不是指向组件实例。合理搭配生命周期网络请求放在onMounted资源清理放在onBeforeUnmount。专栏链接Vue 3 全栈开发实战专栏项目源码资源点击下载项目源码