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>