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助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。