真正有效的应对方式是有策略地控制响应式范围：用markRaw或Object.freeze跳过静态数据；拆分动静数据，仅对变化部分启用响应式；用shallowRef+triggerRef替代深度响应化；配合虚拟滚动减少渲染压力。
Vue 响应式系统本身不阻止大规模数据更新，但默认会对每个属性建立响应式连接，导致初始化开销大、内存占用高、更新变慢。真正有效的应对方式不是“强行让所有数据都响应”，而是有策略地控制哪些数据该响应、哪些不该响应、以及如何更新。
跳过非响应式大数据：markRaw 和 Object.freeze
静态只读数据（如城市列表、国家编码、枚举映射、配置表）一旦加载完成就不再变更，却仍被 reactive 递归代理，白白消耗内存和初始化时间。
- Vue 3 推荐用 markRaw() 在数据注入响应式状态前一次性标记，彻底跳过 Proxy 包装
- Vue 2 或兼容场景可用 Object.freeze() 冻结对象，阻止 Vue 将其转为响应式
- 注意不要对数组每个元素单独 markRaw，应在源头（如 fetch 后）整体标记
拆分动静数据，只对变化部分启用响应式
把一个大对象中真正会动态更新的部分（如用户选中项、筛选条件、编辑中的字段）抽离出来，单独用 reactive 或 ref 管理；其余只读结构保持原始形态。
- 例如：大型表格数据用 markRaw 包裹，而当前页码、搜索关键词、选中行 ID 单独维护为响应式状态
- 避免把整个 10 万条的 items 数组放进 reactive，改用 shallowRef 存原始数组 + 手动 triggerRef 控制刷新时机
用 shallowRef + triggerRef 替代深度响应化
当数据体量极大（如日志列表、地理坐标点阵），且你只需要整批替换（换页、重载），而非频繁修改单个字段时：
立即学习“前端免费学习笔记（深入）”；
- 使用 shallowRef 存储数组或对象，仅代理顶层引用，内部属性不触发 getter/setter
- 赋值新数据后调用 triggerRef，强制视图重新读取整个值，跳过逐项依赖追踪
- 相比 reactive，内存占用可降低 70% 以上，尤其适合“全量刷新”类场景
配合虚拟滚动，减少实际渲染压力
即使数据已非响应式，若仍用 v-for 渲染全部 10 万条，DOM 节点和事件监听器仍会拖垮浏览器。
- 必须搭配虚拟滚动方案（如 vue-virtual-scroller、vue3-virtual-scroller 或 IntersectionObserver 自实现）
- 只渲染可视区域 + 少量缓冲区内的节点，滚动时复用 DOM，而非创建销毁
- markRaw + 虚拟滚动组合，实测可将内存从 1.2GB 降至 80MB，帧率稳定在 60fps
