readonly:将包裹的对象变为只读,并且是深度只读
<template>
<div>
<h2>readonly与shallowReadonly</h2>
<h3>state:{{state}}</h3>
<button @click="update">更新数据</button>
</div>
</template>
<script lang="ts">
import { computed, defineComponent,onMounted,reactive,readonly,ref, } from 'vue'
export default defineComponent({
setup(){
const state = reactive({
name:'小明',
age:12,
car:{
name:'奔驰',
color:'red'
}
})
const state2 = readonly(state)
const update = () => {
state2.name += '---'
}
return {
state,state2,
update
}
}
})
</script>
效果如下图:
可以看到报错了,state2中的name属性是一个只读属性
修改代码:
const update = () => {
state2.car.name += '---'
}
效果如下图:
可以看到,state2中的car的name属性是一个只读属性
shallowReadonly:浅层属性为只读,深层次属性可以修改
浅层次代码:
const state2 = shallowReadonly(state)
const update = () => {
state2.name += '---'
console.log('测试')
}
效果图:
深层次代码:
const update = () => {
state2.car.name += '---'
console.log('测试')
}
点击按钮,效果图:
可以看到深层次属性值发生了变化
总结:
(1)readonly:将包裹的对象变为只读,并且是深度只读
(2)shallowReadonly:浅层属性为只读,深层次属性可以修改