-
shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)
-
shallowRef: 只处理基本类型的响应式, 不进行对象的响应式处理
-
什么时候用浅响应式呢?
- 一般情况下使用ref和reactive即可
- 如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive
- 如果有一个对象数据, 后面功能不会修改该对象的属性，而是产生新的对象来替换 ===> shallowRef
?shallowReactive只是将第一层属性变成响应式，比如以下代码，页面中可以改姓名，改年龄，但是不能改变薪水
<template>
<div class="about">
<div>姓名{{name}}</div>
<div>年龄{{age}}</div>
<div>薪水{{job.job1.salary}}</div>
<button @click="name+='三'">改姓名</button>
<button @click="age++">改年龄</button>
<button @click="job.job1.salary++">改薪水</button>
</div>
</template>
<script>
import { toRefs,shallowReactive } from 'vue'
export default {
name:'nowTest',
setup() {
let person = shallowReactive({
name:'张三',
age:12,
job: {
job1:{
salary:20
}
}
})
return {
...toRefs(person)
}
},
}
</script>
shallowRef处理基本类型时候和ref一样，处理对象类型的不会变成响应式，但是可以替换这个对象。比如将x.y的值++，不会改变，但是可以将x{y:0}这整个对象替换成x{z:0,k:0}
<template>
<div class="about">
<div>x的值{{x}}</div>
<button @click="x.y++">改变x.y</button>
<button @click="x={z:0,k:0}">替换x</button>
</div>
</template>
<script>
import { shallowRef } from 'vue'
export default {
name:'nowTest',
setup() {
let x = shallowRef({
y:0
})
return {
x
}
},
}
</script>
