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;价格可以修改。