readonly 和 shallowReadonly 函数

• readonly 函数

  将 ref、reactive 数据变为只读的数据，并且深层次的属性也是只读的

  import { ref, reactive, readonly } from "vue";
  export default {
    setup() {
      let a = ref(0);
      let b = reactive({
        a: 1,
      });
  
      a = readonly(a); //将数据改为只读的
  
      b = readonly(b); //将数据改为只读的
  
      return { a, b };
    },
  };
  

• shallowReadonly 函数

  只是浅层次的将数据的第一层修改为只读的，更深层次的数据时可以被修改的。

  import { reactive, shallowReadonly } from "vue";
  export default {
    setup() {
      let a = reactive({
        b: 1,
        c: {
          d: 4,
        },
      });
  
      a = shallowReadonly(a);
      //将第一层数据改为只读的
  
      return { a, b };
    },
  };
  

  此处，属性 b、c 为只读的，不能被修改，但是属性 d 不是只读的，是可以被修改的。