readonly和shallowReadonly

readonly

将一个响应式数据变成只可读数据。

<template>
  <div>{{ obj }}</div>
  <button @click="obj.children.age++">修改children.age</button>
</template>

<script>
import { reactive, readonly } from "@vue/reactivity";
export default {
  setup() {
    let obj = reactive({
      name: "张三",
      age: 18,
      children: {
        name: "张三三",
        age: 2,
      },
    });

    // readonly
    obj = readonly(obj); // 让一个响应式数据设置为只读状态
    return {
      obj,
    };
  },
};
</script>

<style></style>

shallowReadonly

将一个响应式数据的第一层数据变为只可读数据。

name age属性，不可被更改 --> 只读（如果修改会有警告）

children属性可以被修改

<template>
  <div>{{ obj }}</div>
  <button @click="obj.children.age++">修改children.age</button>
</template>

<script>
import { reactive, shallowReadonly } from "@vue/reactivity";
export default {
  setup() {
    let obj = reactive({
      name: "张三",
      age: 18,
      children: {
        name: "张三三",
        age: 2,
      },
    });

    // shallowReadonly
    obj = shallowReadonly(obj); //让一个响应式数据将第一层数据设置为只读状态
    return {
      obj,
    };
  },
};
</script>

<style></style>