vue3里的ref和shallowRef在同一个组件里面出现，ref的更新会影响到showllowRef

Question

vue3里的ref和shallowRef在同一个组件里面出现，ref的更新会影响到showllowRef,,如下代码

<script setup>
import { ref, shallowRef, triggerRef } from 'vue'
const count = ref(0)
const obj = shallowRef({
  count:1
})

function addClickHandle(){
  count.value++
}
function addShallowClickHandle(){
  obj.value.count++
  // triggerRef(obj)
}
</script>

<template>
    <div>
        {{ count }}
    </div>
    <button @click="addClickHandle">add count</button>
    <hr>
    <div>
       {{ obj.count }}
    </div>
    <button @click="addShallowClickHandle">add count</button>
</template>

先点击addClickHandle事件，只会更新count这是正常的，
但是先点击addShallowClickHandle,视图不更新，再点击addClickHandle,导致obj.count更新了

如果要不互补影响，该怎么操作，难道二者就不能存在同一个sfc中了吗，框架这样设计是不是不合理了

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

问题描述：
在Vue 3中，当在同一个组件中使用 ref 和 shallowRef 时，更新 ref 会影响到 shallowRef。具体代码如下：

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

const count = ref(0)
const obj = shallowRef({
  count: 1
})

function addClickHandle() {
  count.value++
}

function addShallowClickHandle() {
  obj.value.count++
  // triggerRef(obj)
}
</script>

<template>
  <div>
    {{ count }}
  </div>
  <button @click="addClickHandle">add count</button>
  <hr>
  <div>
    {{ obj.count }}
  </div>
  <button @click="addShallowClickHandle">add count</button>
</template>

先点击 addClickHandle 事件，只会更新 count，这是正常的。但是如果先点击 addShallowClickHandle，视图不会更新，再点击 addClickHandle，导致 obj.count 更新了。

解决思路与方案：
为了避免 ref 的更新影响到 shallowRef，可以考虑使用 toRef 将 shallowRef 转换成普通的 ref。修改代码如下：

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

const count = ref(0)
const obj = ref({
  count: 1
})

function addClickHandle() {
  count.value++
}

function addShallowClickHandle() {
  obj.value.count++
}
</script>

<template>
  <div>
    {{ count }}
  </div>
  <button @click="addClickHandle">add count</button>
  <hr>
  <div>
    {{ obj.count }}
  </div>
  <button @click="addShallowClickHandle">add count</button>
</template>

这样做可以确保 obj 的更新不会影响到 count。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订