vue3中的readonly/isReadonly/shallowReadonly

2022-10-25 14:09:53 浏览数 (3)

readonly,利用proxy,创建一个只读的对象,

isReadonly,判断对象是否为只读对象

shallowReadonly 同shallowRef/shallowReactive,浅层做代理,所有首层引用为只读,深度为可更改

代码语言:javascript复制
<template>
<div>333</div>
<div>{{state.name}}</div>
<div>{{state.attr.age}}</div>
<div>{{state.attr.sex}}</div>
<button @click="myFn">  </button>
</template>

<script>
import { readonly, isReadonly, shallowReadonly } from "vue";
export default {
setup() {
  const state = shallowReadonly({ name: "tom", attr: { age: 18, sex: "男" } });
  function myFn() {
    state.name = "jarry";
    state.attr.age = 19;
    state.attr.sex = "女";
    console.log(state);
  }
  console.log(isReadonly(state))
  return { state, myFn  };
},
};
</script>

<style  scoped>
</style>

1 人点赞