Vue3中常用的Composition(组合)API-readonly 与 shallowReadonly

readonly 与 shallowReadonly

readonly估计大家都知道，在开发中遇到这个词汇比较多，译为只读，shallowReadonly译为浅层次只读

引入readonly 与 shallowReadonly

想要实现必先引入：

  import {readonly,shallowReadonly} from "vue";

readonly限制reavtive类型

如果响应式对象里面的属性不想被修改，想要进行保护，那么这个时候就可以使用readonly了：

这个时候再修改，就不会修改成功，并且控制台还会有警告

除了readonly，还有一个类似的属性叫shallowReadonly

shallowReadonly限制reavtive类型

shallowReadonly只考虑第一层数据，不会考虑多层数据

这样只能修改多层次的sal属性，单层次的name和age还是无法修改的

上面说的例子都是reavtive修饰的数据，接下来换成ref修饰的数据，是否还能剩下呢

readonly限制ref类型

把sum使用readonly修饰

也是只能只读的

总结

• readonly: 让一个响应式数据变为只读的（深只读）。
• shallowReadonly：让一个响应式数据变为只读的（浅只读）。
• 应用场景: 不希望数据被修改时。