最有效方式是跳过响应式处理，Vue 3 的 markRaw API 可标记静态大对象（如城市列表、枚举映射）避免 Proxy 包装；配合 shallowRef、虚拟滚动等策略，大幅降低内存占用与初始化开销。

直接跳过响应式处理是最有效的方式。Vue 3 提供了 markRaw API，能明确告诉响应式系统“这个对象不需要被代理”，从而避免 Proxy 包装、依赖收集和后续的更新追踪开销。

用 markRaw 标记静态大对象

适用于配置项、字典表、初始化后不再变更的 JSON 数据（如城市列表、国家码、枚举映射等）。这些数据一旦加载完成就固定不变，却仍被 reactive 递归转为响应式，白白消耗内存和初始化时间。

• 在数据获取后、注入响应式状态前调用 markRaw
• 不要对整个 data.items 数组或其每个元素反复调用，而应在源头一次性标记
• 配合 shallowRef 或普通 ref 使用，避免意外触发深层响应化

示例：

const rawList = markRaw(await fetchCities());
const state = reactive({
  cities: rawList, // 不再被 Proxy 包装
  selectedId: 0
});

拆分动静数据，按需响应化

把数据结构中真正会变化的部分（如用户操作态、筛选条件、临时编辑字段）单独抽离，只对这部分启用响应式；其余只读部分保持原始形态。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 例如一个带搜索+排序+分页的大表格：表格元数据（列定义、默认排序字段）用 markRaw；当前页数据、搜索关键词、激活列用 ref 或 reactive
• 避免将整个接口返回的巨型对象直接传给 reactive，先解构再选择性包装

改用 shallowRef + 手动触发更新

当静态对象体积极大（如 10 万条记录的纯展示列表），且你只需要在极少数时机整体替换它（比如换页、重载），可用 shallowRef 存储原始数组，配合 triggerRef 主动通知更新。

• shallowRef 只代理顶层引用，不递归响应内部属性，内存占用极低
• 赋值新数组时调用 triggerRef，让视图重新读取整个值，跳过逐项依赖追踪
• 适合“全量刷新”场景，不适合频繁修改单个 item 的场景

结合虚拟滚动减少实际渲染量

即使数据本身已非响应式，若仍用 v-for 渲染全部 10 万条，DOM 节点和事件监听器也会撑爆内存。必须配合虚拟滚动方案（如 vue-virtual-scroller 或原生 IntersectionObserver 实现）。

• 仅渲染可视区域 + 少量缓冲区内的 DOM 节点
• 滚动时复用已有节点，而非创建销毁
• 与 markRaw 配合，可将 10 万条数据的内存从 1.2GB 降至 80MB，帧率稳定在 60fps

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！