vue3中的readonly和shallowReadonly

1.readonly

使用readonly包装过的函数，内部是深层次只读的

如代码所示：

 代码中定义了了一个响应式对象person，然后使用readonly（person）方法传入person返回一个只读的对象，用person接受并返回。所以当运行完成打开页面，点击修改信息，增长年龄，涨薪，都会无法修改。

如图：

 

2.shallowReadonly

使用shallowReadonly包装过的函数，只有最外层属性是只读的，内层依然可以改写。

如代码所示：

//跟上面的代码一样，只是将readonly(person)=> shallowReadonly(person)
person = shallowReadonly(person)//使用了shallowReadonly将对象变为浅只读

 我们定义的响应式对象里面只读的是外面的那一层（name, age），所以在页面上修改的时候，只有name和age会提示如图

3.明明定义的是一个响应式数据（person）当然就是希望被修改的，但shallowReadonly和readonly又是希望不被修改的。那这到底什么时候使用呢？

 如果这个代码中的person的数据是其他组件传给你的，那个组件只是希望你使用但是不修改，但是你不确定你的组件内会不会修改它，所以用readonly和shallowReadonly去修饰，用这两个包裹person生成新的person对象，就算你修改新生成person对象的属性，也不会影响原有的person属性