Vue3 readonly 和 shallowReadonly

一、readonly

使用readonly 可以将数据变为只读的，不管这个数据是ref对象类型的数据还是Proxy对象类型的数据。

使用readonly 需要先进行引入：

import { readonly } from 'vue';

语法格式： 

 const xxx = readonly(数据);

setup() {
  let num = ref(0);
  let person = reactive({
    name: "张三",
    job: {
      type:"前端"
    }
  })

  num = readonly(num);
  person = readonly(person);

  return {
    num,
    person
  };
},

只读表示数据只能被读取而不能被改变，不能和数据可以改变但是没有响应式混淆！

二、shallowReadonly

使用shallowReadonly 需要先进行引入：

import { shallowReadonly } from 'vue';

语法格式： 

 const xxx = shallowReadonly (数据);

如果传入的是普通数据类型的数据，和readonly 没有什么区别。

如果传入的是对象类型的数据，那么只有浅层次的数据只读，深层数据是不可读的。

比如: 在下面的代码中，num 是只读的，person.name是只读的，而person.job.type 是可以修改并带有响应式的。

setup() {
  let num = ref(0);
  let person = reactive({
    name: "张三",
    job: {
      type:"前端"
    }
  })

  num = shallowReadonly(num);
  person = shallowReadonly(person);

  return {
    num,
    person
  };
},