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：让一个响应式数据变为只读的（浅只读）。

• 应用场景: 不希望数据被修改时。