Vue3快速入门-readonly 与 shallowReadonly

最新推荐文章于 2024-06-23 13:36:37 发布

温情key

最新推荐文章于 2024-06-23 13:36:37 发布

阅读量240

点赞数

分类专栏： vue3快速入门文章标签： vue.js typescript 前端

本文链接：https://blog.csdn.net/qq_48960335/article/details/125323353

版权

vue3快速入门专栏收录该内容

17 篇文章 4 订阅

订阅专栏

本文详细介绍了Vue中的`readonly`和`shallowReadonly`两个功能，它们用于创建对象的只读代理。`readonly`使整个对象包括所有层级的属性变为只读，而`shallowReadonly`只对对象的第一层属性进行保护。通过示例代码展示了尝试修改只读数据时会引发的错误，并解释了两者在深层属性修改上的区别。

摘要由CSDN通过智能技术生成

查看本系列文章合集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>