历史小剧场
所谓历史,就是过去的事,它的残酷之处在于:无论你哀嚎,悲伤,痛苦,落寞,追悔,它都无法改变。
一具有名的尸体躺在无数无名的尸体上,这就是所谓的霸业。---- 《明朝那些事儿》
shallowReactive
只有根级别的属性是响应式的
看案例
js
<!-- TestShallow.vue -->
<template>
<div>
<p>学号: {{ id }} 姓名: {{ info.name }}</p>
<button @click="id++">点击增加学号</button>
<button @click="changeName">改变姓名</button>
</div>
</template>
<script lang="ts">
import { isReadonly, shallowReactive, shallowReadonly, toRefs } from 'vue';
export default {
name: 'TestShallow',
setup() {
type Student = {
id: number,
info: {
name: string,
}
}
const student = shallowReactive<Student>({
id: 1,
info: {
name: '张三' // 这里的name不是响应式的
}
})
const changeName = () => {
student.info.name = '莉丝'
console.log("name => ", student.info.name)
}
return {
...toRefs(student),
changeName
}
}
}
</script>
<style lang="scss" scoped>
</style>
当我们点击增加学号时,界面上学号+1;
但是,我们点击修改姓名是,只有控制台打印的姓名变了,而界面上却没变。
这就是说明,这里在info里面的属性不是响应式的
shallowReadonly
只有根节点的属性是只读的
js
const person = shallowReadonly({
name: '新潮',
info: {
age: 25
}
})
console.log("第一层 => ", isReadonly(person)) // true
console.log("第二层 => ", isReadonly(person.info)) // false