shallowReactive() 浅层响应式对象

最后更新：2026-10-22

shallowReactive() 只让对象第一层属性响应式，嵌套对象保持不变（不被代理）。

📝 语法

const state = shallowReactive({ count: 0, nested: { a: 1 } })
state.count++         // ✅ 触发
state.nested.a++      // ❌ 不触发

target	对象（只代理自身属性）

返回值：浅层响应式代理

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

输出：

点「改顶层」数字更新；点「改嵌套」页面不动（数据已变但视图未通知）。

ℹ️ 说明 适用场景与 shallowRef 类似：只需要第一层响应的大型状态结构。

⚠️ 注意 视图不更新≠数据没变：嵌套层数据实际已改，只是没有触发渲染，容易踩坑。

更多案例即将上线。

Q 和 reactive 的差别只有性能吗？

A 不止：行为也不同（嵌套不响应），是语义差异而非纯优化开关。

Q 嵌套对象还能被侦听吗？

A 需要显式 deep 侦听原对象或用 ref 深层包装才能感知。

Q 为什么会有这个 API？

A 为大型/外部数据提供低开销的响应式外壳，避免递归代理成本。

Web-Tutorial 技术团队

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