Vue.js响应式shallowReadonly实现对象属性的一层状态保护

shallowReadonly 仅对对象第一层属性做只读保护深层嵌套对象或数组仍可修改它不递归冻结适用于需防止顶层替换但保留子状态可变性的场景。shallowReadonly 是 Vue 3 提供的一个响应式工具函数它只对对象**第一层属性**做只读保护内部嵌套的对象或数组仍可被修改。它不递归冻结深层结构适合在需要“浅层不可赋值但深层可变”的场景中使用比如防止父级属性被意外替换同时保留子状态的响应式更新能力。它和 readonly 的关键区别不同于 readonly递归地将整个响应式树转为只读shallowReadonly 只拦截顶层属性的 set 操作对 obj.name new 会报错顶层赋值被禁止对 obj.profile.age 25 不报错深层属性仍可修改对 obj.list.push(1) 也不报错嵌套数组方法可用典型适用场景常见于组件 props 或组合式 API 中的“受控但非完全冻结”状态接收父组件传入的配置对象不允许替换整个 config但允许内部字段动态更新如表单字段校验状态封装一个响应式仓库实例暴露只读的 state 引用但保留其内部模块的可变性配合 shallowRef 使用避免对大型嵌套对象做深度响应式转换带来的性能开销实际用法示例在 setup() 中这样使用 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。