最新版vue3+TypeScript开发入门到实战教程之重要详解readonly/shallowReadOnly

紫_龙2026-04-04 23:32

readonly api详解

用于创建一个对象的深只读副本。含义有两层，一是创建的副本对象是只读的。二是副本对象是深层次只读。

用一个实例说明什么事深层次只读。

Fish组件代码

复制代码

<template>
  <div class="fish">
    <h5>{{fishs1}}</h5>
    <h5 >{{fishs2}}</h5>
    <button @click="changeFish()">改变鱼1</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, readonly } from 'vue';
let fishs1 = reactive(
  {
    name: '鲫鱼',
    body: {
      pirce: 10,
    }
  });
let fishs2 = readonly(fishs1);
function changeFish() {
  fishs1.name += '~'
  fishs1.body.pirce += 10;
  // 不可修改
  fishs2.name += '~'
  // 不可修改
  fishs2.body.pirce += 10;
  }
</script>

运行如下图：

fishs2.name += '~' 与fishs2.body.pirce += 10;修改不成功，提示警告信息，其中fishs2.body.pirce += 10;属于深层次不可修改

shallowReadOnly api详解

shallowReadOnly 浅层次只读，与ReadOnly深层次相对应。它只是第一层数据不可修改，第二层以后都可修改。

Fish组件代码

复制代码

<template>
  <div class="fish">
    <h5>{{fishs1}}</h5>
    <h5 >{{fishs2}}</h5>
    <button @click="changeFish()">改变鱼1</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, shallowReadonly } from 'vue';
let fishs1 = reactive(
  {
    name: '鲫鱼',
    body: {
      pirce: 10,
    }
  });
let fishs2 = shallowReadonly(fishs1);
function changeFish() {
  fishs1.name += '~'
  fishs1.body.pirce += 10;
  fishs2.name += '~'
  fishs2.body.pirce += 10;
  }
</script>

运行效果如图，fishs2.body.pirce += 10;价格可以修改。