vue3中使用shallowRef还是会触发更改的原因

关于shallowRef()

ref() 的浅层作用形式。

• 详细信息

和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

• 示例

const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

---

但是我在使用的时候，对state.value.count修改视图还是更新了。
代码如下：

<script setup>
import { ref, shallowRef, triggerRef } from 'vue'

// shallowRef
// 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。
const state = shallowRef({ count: 1 })
const state1 = ref({ count: 1 })
console.log(state.value) // 变为正常对象，失去响应式
console.log(state1.value) // proxy响应式对象
function add() {
  state.value.count++
  // state1.value.count++
  console.log(state.value)
  console.log(state1.value)
}
</script>

<template>
  <h1>state:{{ state }}</h1>
  <h1>state1:{{ state1 }}</h1>
  <button @click="add">++</button>
</template>

<style></style>

原因：

因为在state1更改的时候，触发了ref的响应式更新。
那查看源码我们发现，如下图：
ref的更新调用了triggerRefValue(this, newVal)，从而触发视图更新，此时state和state1处于一个函数作用域，所以state也会被触发更新。
但是这种触发更新是不严谨的
官方推荐在修改shallowRef所定义的深层数据后，使用triggerRef()去主动触发更新，而不是通过这种不规范的方式。