shallowReactive
使用reactive声明的变量为递归监听,使用shallowReactive声明的变量为非递归监听(通俗的讲就是reactive创建的对象将会被vue内部进行递归监听,可以监听到对象中的对象是否发生了改变从而更新视图,而shallowReactive创建的对象只能监听到首层对象的变化)。
<script setup lang="ts">
import { shallowReactive } from 'vue'
const state = shallowReactive({
a: 1,
b: {
res: 2,
c: {
res: 3,
},
},
})
const handleCLick = () => {
state.a = 100
state.b.res = 200
state.b.c.res = 300
}
</script>
<template>
<n-el class="flex flex-col justify-center items-center w-full h-200">
<n-el>{{ state.a }}</n-el>
<n-el>{{ state.b.res }}</n-el>
<n-el>{{ state.b.c.res }}</n-el>
<n-button @click="handleCLick" class="!w-20">点击</n-button>
</n-el>
</template>
shallowRef
其中shallowRef为非递归监听,ref为递归监听,与shallowReactive和reactive不同的是shallowRef和ref监听的对象首层是value这一层,只有当value发生改变时shallowRef声明的变量才会在视图上进行更新。
shallowRef
只有对 .value
的访问是响应式的。
<n-el>{{ state2.res }}</n-el>
<n-button class="!w-20" @click="handleCLick">点击</n-button>
......
const handleCLick = () => {
// state2.value.res = 9999 //不会触发
}
const handleCLick = () => {
state2.value = { //会触发
res: 9999,
}
}
<n-el>{{ state2.res }}</n-el>
<n-el>{{ state2.res2.data }}</n-el>
<n-el>{{ state2.res2.res3.data }}</n-el>
<n-button class="!w-20" @click="handleCLick">点击</n-button>
......
const handleCLick = () => {
state2.value = {
res: 100,
res2: {
data: 200,
res3: {
data: 300,
},
},
}
}
triggerRef
triggerRef的作用则是手动执行与 shallowRef 关联的任何副作用,强制更新视图。
const handleCLick = () => {
state.value.a = 100
state.value.b.res = 200
state.value.b.c.res = 300
state2.value.res = 9999
triggerRef(state2)
}
......
<n-el>{{ state2.res }}</n-el>
<n-el>{{ state2.res2.data }}</n-el>
<n-el>{{ state2.res2.res3.data }}</n-el>
<n-button class="!w-20" @click="handleCLick">点击</n-button>
参考文档:
1、https://www.jianshu.com/p/4e0d4fcff950
2、https://blog.csdn.net/zxBlogs/article/details/114546382