readonly 是 Vue.js 中用于声明“预期不被当前作用域修改”的响应式对象的类型提示与弱运行时防护机制，非强隔离；它通过 TypeScript 类型标记和 Proxy 警告实现开发期约束，但无法阻止绕过 Proxy 的赋值；正确用法是在组合式 API 中返回 readonly 包装的状态与显式变更函数，配合 computed 实现安全派生。
Vue.js 中的 readonly 不是用来“禁止修改数据”的保险锁，而是向开发者和 TypeScript 类型系统发出明确信号：这个响应式对象**预期不会被当前作用域修改**。它不阻止运行时赋值，但能防止意外变更、提升协作清晰度，并在组合式 API 中成为状态保护的关键一环。
readonly 的真实作用：类型提示 + 运行时防护弱约束
readonly 包裹后的响应式对象，在开发阶段（尤其配合 TypeScript）会标记为只读类型，IDE 会报错提示不允许赋值；运行时则通过 Proxy 拦截 set 操作并发出警告（非抛错），但若绕过 Proxy（如直接改原始对象、用 Object.assign 或数组索引赋值），仍可能“突破”。因此它本质是防御性设计，不是强隔离机制。
常见误用场景：
- 对 ref 使用
readonly(ref)→ 实际应使用readonly(ref.value)或更推荐computed(() => ref.value) - 期望
readonly阻止子组件修改 props → Vue 的 props 本身已是只读，无需额外包装 - 用
readonly替代权限控制或服务端校验 → 安全边界必须在后端
合理使用 readonly 保护状态流
在组合式 API 中，readonly 最有价值的地方是明确划分“状态拥有者”与“状态消费者”。例如在自定义 Hook 中返回状态时：
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
✅ 推荐写法：
export function useCounter() {
const count = ref(0)
const increment = () => count.value++
// 外部只能读，无法意外修改
return {
count: readonly(count),
increment
}
}
这样调用方拿到 count 后尝试 state.count.value = 5 会在开发时被 TS 报错，控制台也有警告，有效防止误操作。
配合 computed 实现更安全的派生只读状态
当需要基于响应式源生成不可变视图时，computed 比 readonly 更自然、更可靠：
-
computed(() => obj.foo)返回的是只读计算属性，无法赋值，且自动追踪依赖 - 对数组/对象做只读投影（如过滤、映射）时，
computed可避免深拷贝开销，同时保持响应性和只读语义 - 若需冻结结构（禁止增删属性），可结合
shallowRef+Object.freeze，但注意 freeze 不影响响应式更新
与 reactive / ref 的协同边界
readonly 是“装饰器”，不改变原始响应式对象本身：
- 原始
reactive({ x: 1 })和readonly(reactive({ x: 1 }))共享同一份底层数据 - 如果某处仍持有原始响应式引用，仍可修改——
readonly仅保护它所返回的那个代理对象 - 因此状态保护的关键在于暴露接口的设计**：不向外泄露可写引用，只提供只读访问 + 明确的变更方法（如 action 函数）
