shallowRef() 浅层响应式引用

最后更新：2026-10-22

shallowRef() 只追踪 .value 的替换，不深度代理内部对象：整体换掉才触发更新，内部属性改动不触发。

📝 语法

const big = shallowRef({ list: [] })
big.value = { list: [1] }   // ✅ 触发
big.value.list.push(2)     // ❌ 不触发（内部未代理）

value	任意初始值（内部对象不做深层代理）

返回值：浅层 ref 对象

修改下面的代码，在预览区实时查看效果：

输出：

点「内部 push」数字不变（视图没更新）；点「整体替换」变成 3。

💡 提示 适合大数据集、第三方库实例、地图/图表对象：只关心整体替换，不需要深层响应。

⚠️ 注意 内部改动用 triggerRef 可手动补触发，但更推荐整体替换。

ℹ️ 说明 isShallow() 可判断一个 ref 是否为浅层。

更多案例即将上线。

Q 什么时候必须用 shallowRef？

A 包装大型只读结构（如从接口拿到的大数组）又要整体替换时，省掉深层代理的建立成本。

Q 为什么 push 之后页面不变？

A 内部对象没有代理，Vue 追踪不到这次修改；整体替换 .value 才会通知更新。

Q 和 ref(null) 的差异在性能上大吗？

A 对深层大对象差异明显（省掉递归代理与依赖收集），小对象可以忽略。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。