核心是减少无效更新：拆分组件缩小diff范围，用v-once冻结静态内容，keepalive精准缓存，shallowref/shallowreactive精简响应式代理，markraw避免过度代理。
大型组件树渲染慢，核心问题往往不是“卡在哪儿”，而是“为什么每次都要重算”。关键要识别哪些节点在不该更新时被连带刷新，再针对性收窄响应范围、减少Diff深度、跳过静态内容。
拆分组件，缩小单次Diff范围
一个包含上千节点的单体组件，哪怕只改一个字段，Vue也要遍历整棵树做对比。拆成多个子组件后，变化只影响局部，Diff成本大幅下降。
- 把页面按功能区块切分，比如
<header></header>、<sidebar></sidebar>、<mainlist></mainlist>，每个都独立响应数据 - 避免在父组件模板里写200行HTML；深层嵌套的
v-for建议封装为子组件，用props传入当前项数据 - 测试显示：1000节点单组件平均渲染耗时145ms，拆成5个合理粒度的子组件后降至62ms
冻结静态内容，跳过无意义更新
有些内容从始至终不变，比如页面标题、版权信息、固定提示文案。它们不需要参与响应式追踪，也不该随父组件重渲染而重复生成DOM。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章