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