12.0 vue3 readonly&shallowReadonly

上一篇：

vue3 shallowRef&shallowReactivehttps://blog.csdn.net/qq_42543244/article/details/122771740本篇记录vue3的readonly & shallowReadonly；顾名思义，readonly只读属性，将一个属性设置为只读的属性；

<template>
  <div>Demo组件内容</div>
  <div>{{ num }}</div>
  <button @click="num++">点击+1</button>
  <hr />
  <div>姓名：{{ name }}</div>
  <div>年龄：{{ age }}</div>
  <div>薪资：{{ job.j1.salary }} K</div>
  <div>
    <button @click="name = '李四'">修改姓名</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
  </div>
</template>

<script>
import { reactive, readonly, ref, shallowReadonly, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {
    /* 
    readonly:让一个响应式的数据变为只读的（深只读）
    shallowReadonly:让一个响应式的数据变成只读的（浅只读，第一层数据只读）
    应用场景：不希望数据被修改
    */
    let num = ref(1);
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 10,
        },
      },
    });

    num = readonly(num);
    // num = shallowReadonly(num);
    // person = readonly(person);
    person = shallowReadonly(person);

    return {
      num,
      ...toRefs(person),
    };
  },
};
</script>

下一篇：

vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302