Vue3快速入门-readonly 与 shallowReadonly

查看本系列文章合集click me

下载本系列文章源码click me

readonly

• 深度只读数据
• 获取一个对象响应式、普通对象或 ref对象 并返回它们的 只读代理对象。
• 访问任何层级属性都是只读的，不能修改。

shallowReadonly

• 浅只读数据
• 创建一个代理，只有根层级的属性变为了只读，也就是第一层。

<template>
  <div id="app">
    <h2>readonly: {{ readonlyData }}</h2>
    <h2>shallowReadonly: {{ shallowData }}</h2>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, readonly, shallowReadonly } from "vue";

export default defineComponent({
  setup() {
    const data = reactive({
      name: "",
      son: {
        name: "",
      },
    });

    const readonlyData = readonly(data);
    const shallowData = shallowReadonly(data);

    function update() {
      // readonlyData.name = "温情";  // 报错：无法分配到 "name" ，因为它是只读属性。
      // readonlyData.son.name = "key";  // 报错：无法分配到 "name" ，因为它是只读属性。

      // shallowData.name = "温情"; // 报错：无法分配到 "name" ，因为它是只读属性。
      shallowData.son.name = "key"; // √
    }

    return {
      readonlyData,
      shallowData,
      update,
    };
  },
});
</script>