vue大数据性能优化核心是避免无谓响应式：用markraw+provide+readonly跳过reactive，虚拟滚动和分页减少传输量，toraw直取原始值，严防隐式引用泄漏。
精准控制响应式代理范围
Vue 默认会对所有 props 做响应式处理，当传入万级数组或深层嵌套对象时，Proxy 创建、依赖追踪和缓存更新都会带来显著开销。关键不是“不传”，而是“不响应”。
- 父组件用 markRaw() 包裹只读大数据（如日志列表、配置项），再通过 props 传递，彻底跳过 reactive 转换
- 配合 shallowRef 或 Object.freeze() + readonly()，确保子组件接收后无法意外触发响应式逻辑
- 子组件内避免对这类数据使用
computed或watch，直接用toRaw()访问原始值即可
绕过中间层，直连数据源
当大数据需跨三层以上组件（比如 Layout → Page → List → Item），逐层 props 转发不仅冗余，还会在每层生成独立响应式副本，加剧内存驻留。
- 顶层组件用 provide 注入数据，可叠加
readonly()保证语义只读 - 真正消费数据的底层组件用 inject 直接获取，中间组件完全不持有该数据引用
- 若需彻底隔离响应性，组合
markRaw() + provide + readonly()，避免注入对象被自动 reactive
从源头削减传输量
“传得快”不如“少传点”。多数性能问题源于一次性加载并传递全部数据，而非通信机制本身。
- 列表类场景强制启用 虚拟滚动（如
vue-virtual-scroller），DOM 和数据都只维护可视区 + 缓冲区，props 体积恒定 - 前端分页或 cursor 分页，每次仅传当前页 20–50 条；详情字段（如用户完整档案）改传 ID，点击后再异步 fetch
- 复杂对象只透传摘要字段（name、status、id），避免把整个 user 对象层层下传
严防隐式引用泄漏
子组件不经意间保留父级大数据的引用，是内存无法释放的常见原因。
- 检查生命周期钩子（如
mounted中是否将 props 存入局部变量或闭包） - 避免在
setup中用ref或reactive包裹传入的大 props - 使用 Vue DevTools 的 Memory 面板或 Chrome DevTools 的 heap snapshot 对比，确认组件卸载后大数据是否仍被持有
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
