vue3.0的readonly和shallowReadonly

1,177 阅读1分钟

readonly

获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的:访问的任何嵌套 property 也是只读的。

 // 深层的只读代理
 const obj = readonly(ref({name:"Mr.long"}))
 const object = readonly(reactive({name:"Mr.Jiu"}))

shallowReadonly

创建一个代理,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。

const object = shallowReadonly(reactive({name:"=-=",job:{age:'30'}}))
object.name = 'read' // 会被拦截

 // shallowReadonly只做对象第一层代理
 // 这种情况不会对ref传入的对象拦截 为什么呢?
 const obj = shallowReadonly(ref({name:'Mr.long'}))
  obj.value.name = '--'
 // 因为我们操作的obj.value的值,shallowReadonly只做第一层,所以拦截不到。