小编点评

```html <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 class="!w-20" @click="handleCLick" class="!w-20">点击</n-button> </n-el> </n-el> ``` **描述：** 该代码展示了使用 `shallowReactive` 和 `shallowRef` 来监听组件状态的示例。 * `state` 是一个 `shallowReactive` 声明的变量，它监听 `a`、`b` 和 `b.c` 对象的更改。 * `handleCLick` 函数通过 `shallowRef` 调用 `triggerReftriggerRef` 方法手动触发视图更新。 * `triggerRef` 方法会调用 `state2` 的 `res`、`res2.data` 和 `res2.res3.data` 属性，并触发它们对应的 `shallowRef` 的更新。 * `state2` 是一个嵌套的对象，其中 `res2` 和 `res2.res3` 是 `data` 属性。 **注意：** * `shallowRef` 只监听首层对象的变化。 * `shallowReactive` 只监听 `value` 属性。 * `triggerReftriggerRef` 方法可以手动触发视图更新，即使 `state2` 的任何属性发生变化。

正文

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