响应式系统初次挂载慢主因是初始化过度追踪与嵌套代理；通过静态标记（如v-memo）、浅层劫持（shallowReactive/shallowRef）、延迟响应化及可观测验证，可显著提升首屏性能。
响应式系统初次挂载慢，往往不是因为“响应式本身慢”，而是因为初始化时做了太多不必要的追踪和嵌套代理。静态标记（如 Vue 的 v-memo、Svelte 的 $props 显式声明）配合浅层劫持（如 shallowReactive、shallowRef），能显著减少代理开销和依赖收集量，从而加快首次渲染。
识别哪些数据真需要深度响应式
并非所有状态都需在挂载时就建立完整响应链。例如表格的原始数据列表、配置对象、API 返回的只读元信息，修改频率低或仅用于展示——这类数据适合用浅层劫持。
- 用 shallowReactive 替代 reactive 包裹大型数组或嵌套对象顶层
- 对仅需响应式更新的单个字段（如 loading 状态），优先用 shallowRef 而非 ref
- 模板中明确不参与响应式更新的属性，可用 v-bind:is-static="true" 类似语义标记（需框架支持），或通过编译时提示跳过追踪
用静态标记跳过无变化子树
当组件结构稳定、内部数据在挂载后短期内不会变动，可借助静态标记避免重复 diff 和依赖注册。
- Vue 中使用 v-memo：例如
<div v-memo="[props.id]">{{ props.title }}</div>，只要 id 不变，整个区块跳过响应式绑定和 VNode 更新 - 在组合式 API 中，对计算结果做一次性缓存：用 markRaw 包裹无需响应式的对象（如第三方库实例、静态配置项），防止被自动转为响应式
- SSR 或构建时已知的静态内容，可通过预编译注释（如
<!-- @static -->）交由工具链剥离响应逻辑
结合时机：挂载前完成“最小化响应化”
初次挂载性能瓶颈常出现在 setup 执行 + 响应式转换 + 模板解析三者叠加。应把响应化动作推到真正需要前一刻。
- 初始 state 可先以普通对象存在，待
onMounted或用户交互触发后，再用 shallowReactive 包裹关键字段 - 对异步加载的数据，不要一拿到就
reactive(data)，而是先shallowRef(null)占位，成功后再赋值并选择性深层转换 - 路由级组件启用懒加载时，配合 defineAsyncComponent + shallowRef 管理内部状态，避免未显示时提前代理
验证与收敛
优化不是靠猜。挂载阶段耗时是否下降，要落到可观测指标上。
- 用 Vue Devtools 的 Performance 面板录制 setup 到 mounted 的全过程，重点关注
createApp → mount → render各阶段耗时 - 对比启用
shallowReactive前后，Proxy创建数量和track调用次数（可通过 patch 版本或自定义 observer util 日志验证） - 确保浅层劫持后，视图更新仍符合预期——比如分页切换需触发重渲染，但某行内部字段修改不触发整表更新，就是合理表现
