readonly() 包裹 reactive() 对象可创建响应式只读副本，读取正常、修改被拦截；支持深度只读，嵌套结构自动受保护，配合 torefs 时需先 readonly 再 torefs。
直接用 readonly() 包一层 reactive() 创建的对象，就能得到一个既响应式又只读的副本。它不是冻结原数据，而是给你一个“安全视角”——读取正常、更新被拦截。
基础写法：reactive + readonly 组合
这是最常用也最直接的方式：
- 先用
reactive创建可变的响应式对象 - 再用
readonly包装它，返回只读代理 - 原对象仍可修改，只读代理会同步更新（因为底层共享同一响应式系统）
示例：
const state = reactive({ count: 0, user: { name: 'Alice', role: 'admin' } })const safeState = readonly(state)
console.log(safeState.count) // 0 —— ✅ 可读
safeState.count = 1 // ⚠️ 开发环境警告，生产环境静默失败
safeState.user.role = 'guest' // ⚠️ 同样被拦截（深度只读）
state.count = 5 // ✅ 原对象仍可改，safeState.count 自动变成 5
配合 props 使用：防止子组件误改
父组件传状态给子组件时，推荐在传递前就包装成只读，从源头杜绝副作用：
- 用
readonly包裹reactive或ref数据，再传给子组件 - 子组件即使尝试改
props.user.name，也会立刻收到警告 - 比靠文档或约定更可靠，是防御性编程的实际落地
示例（父组件）：
// 传出去前加 readonly
嵌套结构自动受保护
readonly 默认是深度只读，不需要额外处理嵌套对象或数组：
-
safeState.user.profile.avatar不可赋值 -
safeState.items[0].id = 999同样被拦截 - 哪怕嵌套里有
ref，访问时也会自动解包并保持只读语义
注意：它不支持直接对 Map、Set、Date 等非 plain object 类型做深层保护，如有需要，需搭配 deepReadonly（Vue 官方未内置，但社区有实现或可用 shallowReadonly + 手动包装）。
和 toRefs 配合：解构后仍保持只读
如果想解构 readonly(reactive(...)) 的属性，又不想丢失只读性，顺序很重要：
- 必须先
readonly，再toRefs - 反过来（先
toRefs再readonly）会导致每个 ref 解构后失去只读约束
正确写法：
const state = reactive({ a: 1, b: 2 })const safeRefs = toRefs(readonly(state))
// safeRefs.a 是只读 ref，safeRefs.a.value = 99 会警告
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
