一、shallowReactive对比reactive
- 使用reactive声明的变量为递归监听,使用shallowReactive声明的变量为非递归监听(通俗的讲就是reactive创建的对象将会被vue内部进行递归监听,可以监听到对象中的对象是否发生了改变从而更新视图,而shallowReactive创建的对象只能监听到首层对象的变化)。
<template>
<!-- reactive -->
<div>{{ reactiveState }}</div>
<button @click="reactiveStateChange">改变reactiveState.b.c</button>
<!-- shallowReactive -->
<div>{{ shallowReactiveState }}</div>
<button @click="shallowReactiveChange">改变shallowReactiveState.b.c</button>
</template>
<script>
import { shallowReactive, reactive } from 'vue'
export default {
name: 'App',
setup() {
const reactiveState = reactive({
a: 'a',
b: {
c: 'c',
d: {
e: 'e',
},
},
})
function reactiveStateChange() {
reactiveState.b.c = 99999
console.log(reactiveState, 'reactiveState发生了变化且视图更新了')
}
const shallowReactiveState = shallowReactive({
a: 'a',
b: {
c: 'c',
d: {
e: 'e',
},
},
})
function shallowReactiveChange() {
shallowReactiveState.b.c = 99999
console.log(shallowReactiveState, 'shallowReactiveState发生了变化但视图未更新')
// 打开下方这行注释视图将进行更新(因为首层对象发生了改变)
// shallowReactiveState.a = 99999
}
return {
reactiveState,
reactiveStateChange,
shallowReactiveState,
shallowReactiveChange,
}
},
}
</script>
二、shallowRef对比ref
- ref底层相当于调用了一次reactive,并且使用value包裹了创建的变量。
const state = ref(false)
等价于
const state = reactive({
value: false,
})
- 其中shallowRef为非递归监听,ref为递归监听,与shallowReactive和reactive不同的是shallowRef和ref监听的对象首层是value这一层,只有当value发生改变时shallowRef声明的变量才会在视图上进行更新。
<template>
<div>{{ shallowRefState }}</div>
<button @click="shallowRefChange">改变state.b.c</button>
</template>
<script>
import { shallowRef, ref, triggerRef } from 'vue'
export default {
name: 'App',
setup() {
const shallowRefState = shallowRef({
a: 'a',
b: {
c: 'c',
d: {
e: 'e',
},
},
})
function shallowRefChange() {
shallowRefState.value.b.c = 99999
console.log(shallowRefState, 'shallowRefChange发生了变化但视图未更新')
// 打开下方代码视图才会进行更新(原因是shallowRefState首层value发生了改变)
// shallowRefState.value = {
// a: 'a',
// b: {
// c: '变化的数据',
// d: {
// e: 'e',
// },
// },
// }
}
return {
shallowRefState,
shallowRefChange,
}
},
}
</script>
三、triggerRef的作用
- 上文第二点我们说到只有当value发生改变时shallowRef声明的变量才会在视图上进行更新,而triggerRef的作用则是手动执行与 shallowRef 关联的任何副作用,强制更新视图。
<template>
<div>{{ shallowRefState }}</div>
<button @click="shallowRefChange">改变state.b.c</button>
</template>
<script>
import { shallowRef, ref, triggerRef } from 'vue'
export default {
name: 'App',
setup() {
const shallowRefState = shallowRef({
a: 'a',
b: {
c: 'c',
d: {
e: 'e',
},
},
})
function shallowRefChange() {
shallowRefState.value.b.c = 99999
triggerRef(shallowRefState)
}
return {
shallowRefState,
shallowRefChange,
}
},
}
</script>
四、没有triggerReactive!没有triggerReactive!没有triggerReactive!