【vue3练习 -12】vue3使用readonly(),shallowReadonly()

作用：把一个响应式（可以是ref定义的，也可以是reactive定义的）的数据变成只读的，不可以修改，

使用场景：假如你的组件有个数据，但是你不希望在使用的时候修改他就可以把他变成只读的

用法示例：

    import {
  readonly,
  shallowReadonly,
} from "vue";
//定义一个响应式对象
let person = reactive({
      name: "川建国",
      age: "74",
      phone: {
        brand: "华为",
        price: 5555,
        color: "黑色",
        channel: {
          source: "拼多多",
          country: "china",
        },
      },
    });
    // 使用
    person = readonly(person);//全部只读，深度只读
    person = shallowReadonly(person);//浅层次的只读，只有第一层只读，两个同时用的话结果是深只读
//最后记得return出去
  return {
      person
    };