props 本身不会直接导致内存泄漏，但大批量数据层层透传会引发隐式内存压力；优化关键在于精准、轻量、可控地传递，如用 markraw 避免响应式代理膨胀、provide/inject 拆分数据流、虚拟滚动减量、杜绝子组件意外保留引用。
Props 本身不会直接导致内存泄漏，但在大批量数据（如万级数组、深层嵌套对象）通过 props 层层透传时，容易引发隐式内存压力：频繁的响应式代理创建、不必要的渲染、对象引用冗余，以及子组件意外保留父级大数据的引用。优化核心不是“少传”，而是“传得更精准、更轻量、更可控”。
避免响应式代理膨胀：用 markRaw 或非响应式结构传递只读大数据
Vue 会对所有传入 props 的对象自动调用 reactive()（在 setup 中）或建立 getter/setter（在 Options API 中）。若某 props 是 10 万条日志的数组，且子组件仅用于只读渲染（如表格展示），每次更新都会触发 Proxy 代理开销和依赖追踪缓存增长。
- 父组件中，对纯展示型大数据使用 markRaw() 包裹，阻止其被转为响应式：
const rawLogs = markRaw(largeLogArray)，再作为 props 传入 - 或改用 Object.freeze()（需确保数据不被修改）+ shallowRef，让 Vue 跳过深度响应化
- 子组件接收后，用 toRaw() 或直接访问（因已非响应式），避免
computed或watch对其做无意义依赖收集
拆分数据流：用 provide/inject 替代多层 props 透传
当大数据需跨 3 层以上组件（如 Layout → Page → List → Item），每层都用 props 接收并转发，不仅代码冗余，还会在每层创建新的响应式引用副本，加剧内存驻留。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 顶层组件 provide 数据（可配合 readonly() 保证只读语义）
- 真正需要的底层组件 inject，跳过中间层，避免中间组件持有该数据的响应式副本
- 注意：provide/inject 不是响应式“魔法”，若提供的是响应式对象，inject 后仍是响应式；若想彻底隔离，仍需 markRaw + readonly 组合
按需加载与虚拟滚动：从源头减少传递的数据量
所谓“大批量”，常源于一次性加载全部数据。与其优化传递过程，不如优化“是否必须传全部”。
- 前端分页或无限滚动：只传当前页 20–50 条，配合后端接口支持 offset/limit 或 cursor
- 列表类场景强制启用 虚拟滚动（virtual scroller），如 vue-virtual-scroller 或 recyclerlistview，DOM 和数据都只维护可视区域 + 缓冲区，props 传递量恒定
- 复杂对象只传 ID 或摘要字段，详情通过事件或异步 fetch 按需拉取（例如点击展开才请求该行完整数据）
检查副作用：防止子组件意外保留大数据引用
内存持续增长的常见原因，不是 props 本身，而是子组件内部逻辑无意中形成了闭包引用或全局缓存。
- 避免在
setup中将 props 直接赋值给 ref() 或 reactive()，这会创建新响应式副本：const localData = ref(props.bigList) // ❌ 复制一份响应式数据 - 不要在
onMounted或watch中对 props 做全量深拷贝（JSON.parse(JSON.stringify())等） - 使用 Chrome DevTools 的 Memory tab → Heap snapshot 对比前后快照，筛选出未释放的大型数组或对象实例，定位哪段代码持有了它们
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
