vue3中shallowReactive对比reactive、shallowRef对比ref以及triggerRef作用

一、shallowReactive对比reactive

• 使用reactive声明的变量为递归监听，使用shallowReactive声明的变量为非递归监听（通俗的讲就是reactive创建的对象将会被vue内部进行递归监听，可以监听到对象中的对象是否发生了改变从而更新视图，而shallowReactive创建的对象只能监听到首层对象的变化）。

二、shallowRef对比ref

• ref底层相当于调用了一次reactive，并且使用value包裹了创建的变量。

const state = ref(false)
    等价于
const state = reactive({
    value: false,
})

• 其中shallowRef为非递归监听，ref为递归监听，与shallowReactive和reactive不同的是shallowRef和ref监听的对象首层是value这一层，只有当value发生改变时shallowRef声明的变量才会在视图上进行更新。

三、triggerRef的作用

• 上文第二点我们说到只有当value发生改变时shallowRef声明的变量才会在视图上进行更新，而triggerRef的作用则是手动执行与 shallowRef 关联的任何副作用，强制更新视图。

四、没有triggerReactive！没有triggerReactive！没有triggerReactive！