一、readonly
- 作用:
readonly
用于创建一个深度只读的响应式对象。这个对象的属性及其嵌套属性都无法被修改(即所有层次的数据都无法被修改)。 - 适用场景: 适合在需要保护对象不被修改的情况下使用,比如将状态传递给子组件,防止子组件意外更改父组件的状态。
<template>
<div class="person">
<h4>汽车car1:{
{ car1}}</h4>
<h4>汽车car2:{
{ car2}}</h4>
<button @click="changeGrand1">修改品牌(car1)</button>
<button @click="changeColor1">修改颜色(car1)</button>
<button @click="changePrice1">修改价格(car1)</button>
<hr/>
<button @click="changeGrand2">修改品牌(car2)</button>
<button @click="changeColor2">修改颜色(car2)</button>
<button @click="changePrice2">修改价格(car2)</button>
</div>
</template>
<script setup lang='ts' >
import { ref,readonly, reactive,shallowReadonly } from 'vue'
const car1 = reactive({
brand: '奔驰',
options: {
color: 'red',
price:8520,
}
})
// 使用 readonly
const car2 = readonly(car1)
// 可修改
const changeGrand1 = ()=>{
car1.brand = '宝马'
}
// 可修改
const changeColor1 = ()=>{
car1.options.color = 'skyblue'
}
// 可修改
const changePrice1 = ()=>{
car1.options.price += 20
}
// 不可修改
const changeGrand2 = ()=>{
car2.brand = '宝马'
}
// 不可修改
const changeColor2 = ()=>{
car2.options.color = 'skyblue'
}
// 不可修改
const changePrice2 = ()=>{
car2.options.price += 20
}
</script>
<style scoped>
</style>
二、shallowReadonly
- 作用:
shallowReadonly
与 readonly
相似,但它只会将对象的第一层属性变为只读,而不会深度递归到嵌套对象的属性。即仅对对象的顶层属性创建只读代理,嵌套属性仍然是可修改的。 - 适用场景: 当确信需要保持对象的整体只读性,但愿意允许嵌套对象属性的可修改性时,使用
shallowReadonly
可以提高性能。
<template>
<div class="person">
<h4>汽车car1:{
{ car1}}</h4>
<h4>汽车car2:{
{ car2}}</h4>
<button @click="changeGrand1">修改品牌(car1)</button>
<button @click="changeColor1">修改颜色(car1)</button>
<button @click="changePrice1">修改价格(car1)</button>
<hr/>
<button @click="changeGrand2">修改品牌(car2)</button>
<button @click="changeColor2">修改颜色(car2)</button>
<button @click="changePrice2">修改价格(car2)</button>
</div>
</template>
<script setup lang='ts' >
import { ref,readonly, reactive,shallowReadonly } from 'vue'
const car1 = reactive({
brand: '奔驰',
options: {
color: 'red',
price:8520,
}
})
// 使用 shallowReadonly
const car2 = shallowReadonly(car1)
// 可修改
const changeGrand1 = ()=>{
car1.brand = '宝马'
}
// 可修改
const changeColor1 = ()=>{
car1.options.color = 'skyblue'
}
// 可修改
const changePrice1 = ()=>{
car1.options.price += 20
}
// 不可修改
const changeGrand2 = ()=>{
car2.brand = '宝马'
}
// 可修改
const changeColor2 = ()=>{
car2.options.color = 'skyblue'
}
// 可修改
const changePrice2 = ()=>{
car2.options.price += 20
}
</script>
<style scoped>
</style>
总结
API | 深度 | 嵌套属性可修改性 | 使用场景 |
---|
readonly | 深度 | 不可修改 | 对整个对象和嵌套属性都只读 |
shallowReadonly | 浅层 | 可修改(除顶层外) | 对顶层属性只读,嵌套属性可修改 |