shallowref 是 vue 3 自发布起内置的响应式工具，核心价值是避免对大型数据结构做无意义的深度响应式代理以降低渲染开销，适用于上万行表格、第三方实例及静态配置等场景。
shallowRef 不是“新出”的 API，它是 Vue 3 自发布起就内置的响应式工具，但长期被低估。它的核心价值在于：**避免对大型数据结构做无意义的深度响应式代理，从而大幅降低渲染开销**。尤其在表格、列表、图表等场景中，效果立竿见影——实测可减少 60%–70% 的渲染时间。
适合用 shallowRef 的典型场景
不是所有 ref 都需要深度响应。当你明确知道：只会在整体替换数据时触发更新，而不会频繁修改内部字段，shallowRef 就是最优解。
- 上万行表格数据（如 Element Plus el-table）：原始 data 用 ref 会为每条记录、每个嵌套字段创建 Proxy，CPU 和内存压力陡增；改用 shallowRef 后，仅监听 .value 是否被整体赋值，性能跃升
- ECharts / Three.js 等第三方实例：这些库自身管理状态，Vue 深度代理反而干扰其生命周期，甚至引发报错；shallowRef 让实例保持原样，只在你主动替换整个实例时更新视图
- 静态配置或只读基础数据集：比如城市列表、字典项、API 返回的原始 JSON 数组，本身不需响应式变更，却因 ref 被层层代理，白白消耗资源
怎么用？关键就两步
写法和 ref 几乎一样，但行为逻辑完全不同。重点不是“怎么声明”，而是“怎么更新”。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章