readonly() 创建只读代理

最后更新：2026-10-22

readonly() 创建原数据的只读代理：任何写入都会警告并失败，用于防止数据被意外修改。

📝 语法

const config = readonly({ theme: 'dark' })
config.theme = 'light'  // ❌ 警告：Set operation on key failed

target	对象或 ref（传 ref 返回只读 ref）

返回值：深度只读代理

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

输出：

主题保持 dark；点击按钮控制台出现写入失败警告，页面不变。

💡 提示 典型场景：把配置对象传给子组件时用 readonly 包裹，防止子组件改到父组件的数据。

ℹ️ 说明 只读是单向的：来源（原对象）变化会同步到只读代理，反向写入被拦截。

⚠️ 注意 开发环境写入会警告，生产环境静默失败——不要依赖警告作为运行时校验。

更多案例即将上线。

Q readonly 能防止所有修改吗？

A 它拦截通过代理的写入；绕过代理直接操作原对象仍可修改，所以只读代理不等于数据不可变。

Q readonly 包裹后数据还会更新吗？

A 会：源数据变化会同步反映到只读代理上，只是不能反向写。

Q 和 Object.freeze 有什么区别？

A freeze 冻结真实对象且不可逆；readonly 只是代理层拦截，保留了响应式追踪能力。

Web-Tutorial 技术团队

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