Vue3只读代理---readonly、isReadonly、shallowReadonly

readonly

获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的：访问的任何嵌套 property 也是只读的。

<template>
  <div>
    <div ref="state">{{ state.name }}</div>
    <div ref="state">{{ state.attr.age }}</div>
    <div ref="state">{{ state.attr.height }}</div>
    <button @click="handelClick">按钮</button>
  </div>
</template>

<script>
import { readonly } from "vue";
export default {
  setup() {
    let state = readonly({ name: "山竹", attr: { age: 18, height: 1.88 } }); //本质是reactive({value:null})
    function handelClick() {
      state.name = "杀生丸";
      state.attr.age = 19;
      state.attr.height = 1.99;
      console.log(state);
    }
    return { state, handelClick };
  },
};
</script>

效果,没有任何变动

shallowReadonly

使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

isReadonly

检查对象是否是由readonly创建的只读代理。