应精简响应式依赖、控制子组件更新边界、拆分延迟状态粒度、优化编译层写法：用shallowref/shallowreactive/markraw减少代理开销，v-memo和函数式组件跳过无关更新，pinia按需订阅，防抖更新与虚拟滚动提升大数据场景性能。
大型应用的状态更新树一旦变深变广，组件频繁重渲染就容易拖慢响应速度。关键不是压根不用响应式，而是让响应式只在真正需要的地方生效、只在真正变化的时候触发。
精简响应式依赖范围
深层嵌套对象或大数组全量响应式，会让每次更新都触发大量依赖追踪和副作用执行。比如一个万条数据的表格，用 reactive 包裹整个数组，哪怕只改一个字段，所有行组件都会收到通知。
- 用 shallowRef 替代 ref 存储大型不可变结构（如原始列表、配置对象）
- 对仅需监听顶层变化的数据，改用 shallowReactive
- 第三方类实例、图表库对象、富文本编辑器实例等，一律用 markRaw 包裹，避免被 Proxy 代理
控制子组件更新边界
父组件重渲染时，默认会递归触发所有子组件的更新检查。但很多子组件其实和本次状态变更无关，白白消耗 CPU。
- 在子组件 props 不变的前提下，用 v-memo 显式声明更新条件，例如
v-memo="[item.id]"，只要 id 不变，内部内容再变也不重新渲染 - 避免在 setup 中解构 props，否则会丢失响应性连接，导致更新失效或误判
- 对纯展示型子组件，可配合 shouldUpdate（通过 defineComponent 的选项 API）或封装为函数式组件跳过响应式系统
拆分与延迟状态粒度
把“一个大状态”拆成多个小状态，能让更新更精准；把“立刻更新”变成“按需更新”，能缓解主线程压力。
- 将全局状态按模块切分，使用 Pinia store 的 storeToRefs 按需订阅字段，而不是整个 store
- 对搜索输入、表单校验等高频操作，用 customRef 实现防抖或节流更新，避免每键触发一次响应式变更
- 表格、树形结构等大数据场景，用虚拟滚动 + 非响应式数据源（shallowRef + markRaw），只在用户交互后手动替换整个数据块
编译层辅助优化
Vue 3 编译器本身已做大量自动优化，但写法会影响效果。模板不是越灵活越好，而是越“可预测”越高效。
- 静态内容要彻底静态化：用 class="xxx" 而非 :class="['xxx', isActive && 'active']"，否则静态节点无法提升
- 动态 class/style 绑定尽量用对象语法 :class="{ active: isActive }"，便于编译器打上 PATCH_FLAG（如 CLASS=2）
- 避免在模板中调用复杂函数或访问深层嵌套属性，提取为 computed 或 setup 中预计算值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
