readonly是vue 3中用于创建深度只读响应式代理的api，接收响应式或普通对象并返回只读代理，开发时修改触发警告、生产时静默失败，支持嵌套属性保护且不干扰原对象响应性。
readonly 是 Vue 3 提供的一个响应式 API，用于创建一个只读的响应式代理对象。它不会阻止你修改原始数据，但会在开发模式下发出警告；在生产模式下则静默忽略赋值操作。它的核心作用是防止逻辑误改数据，同时保留响应式更新能力。
readonly 的基本用法
它接收一个响应式对象（如 ref、reactive 创建的）或普通对象，返回一个只读代理：
- 对只读代理的属性赋值、删除属性、添加新属性等操作，在开发环境下会触发控制台警告
- 只读代理的嵌套属性也自动被保护（深度只读），无需额外处理
- 它不改变原对象，也不影响其响应性——原对象仍可正常修改，只读代理只是“观察视角”
何时该用 readonly？
常见于以下场景：
- 父组件向子组件传递 props 时，希望子组件不能意外修改传入的数据（尤其配合
defineProps使用） - 从 store 或组合式函数中暴露状态，但仅允许读取（例如全局配置、权限信息）
- 封装第三方库响应式数据，对外提供安全只读接口
与 const、Object.freeze 的区别
三者目标相似，但行为不同：
-
const只限制变量重新赋值，不阻止对象内部修改 -
Object.freeze()冻结对象，但不是响应式——Vue 无法追踪其变化 -
readonly()保持响应式，且支持深层只读，同时兼容 Vue 的依赖追踪机制
配合其他 API 使用示例
常与 shallowReadonly、computed 或 toRefs 搭配使用：
-
shallowReadonly：只冻结第一层，适合性能敏感、深层可变的场景（如大型列表项） - 搭配
computed：返回只读计算属性，避免外部篡改缓存结果 - 搭配
toRefs：解构 reactive 对象后，仍保持只读语义（需先 readonly 再 toRefs）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
