Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
shallowReactive
shallow意为浅的 shallowReactive是针对引用类型的浅响应式，只处理最外层的属性或者数据为响应式
<template>
<!-- <div>{{obj.a}}</div> -->
<div>{{obj.b.a}}</div>
<button @click="clickBtn">点击按钮</button>
</template>
<script>
import { shallowReactive } from "vue"
export default {
name: 'HelloWorld',
setup() {
const obj = shallowReactive({
a:1,
b:{
a:1
}
})
function clickBtn() {
// 对于最外层的属性是具有响应式的
// obj.a++
// 对于深层的属性是不具有响应式的
obj.b.a++
}
return {obj,clickBtn}
}
}
</script>
shallowRef
shallowRef只对基础数据类型做响应式，对引用数据类型不做响应式处理
<template>
<div>{{a}}-{{obj1.a}}</div>
<button @click="clickBtn">点击按钮</button><br>
<button @click="clickBtn1">点击按钮1</button>
</template>
<script>
import { shallowRef } from "vue"
export default {
name: 'HelloWorld',
setup() {
let a = shallowRef(2)
const obj1 = shallowRef({
a:1,
b:{
a:1
}
})
function clickBtn() {
// 对于基础数据类型是具有响应式的
a.value++
}
function clickBtn1() {
// 对于引用数据类型是不具有响应式的
obj1.value.a++
}
return {a,obj1,clickBtn,clickBtn1}
}
}
</script>
总结
- 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化建议使用shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换建议使用shallowRef
坑
- 如果两个以上的数据使用了shallowReactive会有问题，当操作让最外层的属性改变的时候，之前操作过的深层的属性也会跟着改变；如果不理解看下面代码；如果先点击按钮1页面不会改变（不具有响应式），再点击按钮2页面会改变（浅层具有响应式）并且按钮1之前的操作也会反应到页面
- shallowRef也存在类似的问题，混合使用也有这个问题
- 最新版本3.2.31也是存在这个问题的
- 所以在数据量不是非常庞大的情况下不建议使用，如果哪个版本没有这个问题了我们就可以随便用了
<template>
<div>{{obj.b.a}}-{{obj1.a}}</div>
<button @click="clickBtn">点击按钮1</button><br>
<button @click="clickBtn1">点击按钮2</button>
</template>
<script>
import { shallowReactive } from "vue"
export default {
name: 'HelloWorld',
setup() {
const obj = shallowReactive({
a:1,
b:{
a:1
}
})
const obj1 = shallowReactive({
a:1,
b:{
a:1
}
})
function clickBtn() {
obj.b.a++
}
function clickBtn1() {
obj1.a++
}
return {obj,obj1,clickBtn,clickBtn1}
}
}
</script>
