vue3 | shallowReactive 、shallowRef、triggerRef

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