大多数人以为会用ref / reactive就会Vue3。但在我们对 100+份团队代码评审的样本中，90%的性能问题都出在侦听与生命周期的错用。

这篇只做一件事：把Vue3 最常用核心函数讲清楚，并给出场景—选型—范式—避坑—性能”的一体化清单。收藏即可当速查表。

一、响应式核心（怎么“让数据会动”）

从 ref/reactive 到 computed 的依赖关系

a.选型心法

– 单值/原始：优先 ref；大对象或第三方实例：shallowRef

– 结构化对象：reactive；只需顶层响应：shallowReactive

– 只读视图/公共暴露：readonly/shallowReadonly

– 从对象取单独属性并保持追踪：toRef / toRefs

– 基于依赖缓存的派生状态：computed

b. 标准范式

c.常见坑

– 模板会自动解包 ref，但脚本必须用 .value

– reactive只能包对象/数组；原始值请用 ref

– 深层大对象频繁变更且无需深追踪，用 shallow*`系列

d. 性能提议

– 大对象仅改动个别字段：用 toRef 做定向追踪，减少不必要更新

– 重型计算放 computed，避免在模板直接重算

二、侦听工具（数据变了就“做点事”）

watch 的 onCleanup 撤销上一次请求

a. 选型

– 准确监听路径且需要新旧值：watch

– 自动收集依赖、快速原型：watchEffect

– 渲染后执行副作用：watchPostEffect

– 同步执行：watchSyncEffect（极少数场景）

b. 标准范式（含清理）

c.易错与规避

– 源尽量函数化：watch(() => obj.a)；深度对象用 { deep: true } 或监听具体路径

– watchEffect内不要直接修改依赖本身，避免循环；需要清理用回调形参 onCleanup

三、生命周期（何时挂、更、卸）

挂载/更新/卸载的典型用法

– DOM 依赖、第三方库初始化：onMounted

– 读取最新 DOM 状态：onUpdated

– 清理定时器、事件、订阅、网络请求：onUnmounted

– 调试渲染依赖：
onRenderTracked/onRenderTriggered（定位不必要更新）

四、依赖注入（跨层级通信）

– 想“跟着变”，就提供响应式值；注入时给默认值兜底

– 典型场景：主题、全局配置、服务实例、表单上下文

五、应用与渲染

– createApp：创建应用并挂载

– defineAsyncComponent：异步加载组件，做分包与懒加载

defineAsyncComponent 实现视图懒加载

– nextTick：等这轮 DOM 更新后再执行（测量/动画/读取新 DOM）

– h：无模板/JSX 场景手动创建虚拟节点

– useSlots/useAttrs：在组合式 API 中获取插槽与透传属性

六、<script setup>宏（让 SFC 更简洁）

七、迁移对照（Vue2 → Vue3）

– computed 基本一致；watch 替代 watcher

– 生命周期命名与调用时机更清晰（组合式 API 顶层调用）

– 事件/插槽：useAttrs/useSlots 替代 this.$attrs/this.$slots

– 提议策略：增量迁移，存量模块保留 Options API，新模块使用 Composition API

八、团队规范与评审要点

Vue3 团队评审要点

– 模板中不做重度计算；派生状态统一用 computed

– 副作用统一放在 watch 系列，避免分散在各处

– 组件通信优先依赖注入或状态库，减少多层 props 传递

– 明确“读/写”边界：只读暴露用 readonly；公共 API 注明变更责任

– 统一 ref/reactive 命名规范，避免混用导致可读性差

九、实战案例（含来源）

案例 1：搜索框去抖 + watchEffect

– 思路：输入变化后 300ms 再发请求，期间清理上一次请求

– 来源：结合官方指南与实际项目复盘

案例 2：图表组件的初始化与清理

– 来源：团队代码评审样本与性能监测经验

案例 3：异步组件与分包

– 来源：官方文档与路由级视图拆分实践

十、常见坑与 FAQ

1. 模板自动解包 ref，脚本必须 .value

2. reactive 不能包原始值；原始值请用 ref

3. watch 源优先函数：watch(() => obj.a)；深度对象用 { deep: true }

4. watchEffect 里不要直接修改依赖；清理用 onCleanup

5. 生命周期钩子只能在 setup() 或 <script setup> 顶层使用

6. nextTick 是“等这轮更新后”，不是立刻；常用于读新 DOM、做动画/测量

#vue##前端##前端进阶##编程学习##前端面试#