vue3中的readonly/isReadonly/shallowReadonly

刘嘿哈

发布于 2022-10-25 14:09:53

2670

发布于 2022-10-25 14:09:53

文章被收录于专栏：js笔记

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

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

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

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除

proxy