优化 vue 性能的核心是精准控制响应式更新：避免内联函数和临时对象、合理使用 key 和响应式边界、善用 computed/watch 分工、缓存复用组件与逻辑。
避免不必要的重新渲染，核心是让 Vue 准确识别“哪些变化真该更新视图”。不是压制更新，而是帮它做对判断。
模板里别写内联函数和临时对象
每次渲染都会新建一个函数或对象，哪怕内容一模一样，引用也不同。子组件收到新引用，就会认为 props 变了，触发重渲染。
- 把
@click="() => handle(id)"换成@click="handleClick"，并在 setup 或 methods 中定义 handleClick - 样式、配置等对象不要写成
:style="{ color: c }"，改用预先声明的 ref：const styleObj = ref({ color: c }) - v-for 渲染时，
:key必须稳定唯一，优先用业务 ID，不用 index
合理划定响应式边界
响应式不是越深越好。包裹范围过大，改一个字段就通知整棵树；包裹不足，又可能漏掉更新。
- 静态配置、大字典、只读数据，用
shallowRef或markRaw避免递归代理 - 深层对象若只需监听某几个字段，拆成多个独立 ref，或用
computed封装派生状态 - 从 store 解构后再返回，比如
const { user, role } = useAuth(); return { user, role };，而不是直接 return useAuth()
用好 computed 和 watch 的分工
computed 负责缓存派生值，watch 负责执行副作用——两者各司其职才能减少冗余计算。
- 模板中反复用到的值（如过滤后列表、格式化金额），必须用
computed，别在插值表达式里实时算 - 监听对象某个字段时，写
watch(() => obj.field, ...)，别用watch(obj, { deep: true })，后者开销大还易误触 - 发请求、改 DOM、写 localStorage 这类操作，放在
watch里，不在computed中做
缓存 + 复用：该留的留下，该省的省掉
有些组件不总需要重建，有些逻辑不该重复执行。
- Tab 页、表单步骤这类切换频繁但状态稳定的组件，用
<keep-alive></keep-alive>包裹，配合include和max控制缓存粒度 - 通用逻辑（校验、权限、滚动）抽成
useXXX()组合式函数，多个组件调用互不影响 - 非关键路径的大组件（如图表编辑器），用
defineAsyncComponent异步加载，结合<suspense></suspense>统一处理 loading
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
