Vue中shallowRef修改内部值不触发更新，为何仅替换引用才生效？

首先明确你代码里的几个核心问题：

1. 第二个按钮的操作是错误的 #

你写的shallowState = {count: ++value}违反了JS语法规则——shallowState是用const声明的常量，无法直接重新赋值，运行时会抛出Assignment to constant variable的错误。如果你的测试里这个按钮能生效，说明你可能把const改成了let，但这时shallowState已经不再是shallowRef对象，变成了普通的非响应式对象。

2. 为什么你看到第二个按钮“触发了更新” #

如果改成let后，点击第二个按钮时，虽然shallowState和value都不是响应式数据，但Vue在用户交互事件（比如点击）执行完成后，会自动触发一次组件重新渲染。这时模板会重新读取shallowState.count的最新值，看起来像是“更新了”，但这并不是shallowRef的响应式更新，只是事件触发的强制渲染。

3. 第一个按钮的操作本应触发更新，但你没看到效果？ #

按照官方文档的规则，shallowRef会监听.value的引用变化，所以shallowState.value = {count: ++value}这种替换引用的操作应该触发响应式更新。如果你测试中没看到效果，大概率是以下原因：

• 测试时的误判，比如没注意到数值变化；
• 模板写法没问题，{{ shallowState.count }}等价于{{ shallowState.value.count }}（Vue会自动解包ref对象），但可能你的测试环境存在缓存或其他干扰；
• 代码中value是普通变量，但这不影响shallowRef的响应式逻辑——只要替换了.value的引用，就会触发更新。

正确的测试示例 #

要验证shallowRef的特性，应该这样写：

<script setup>
import { shallowRef } from 'vue';

const shallowState = shallowRef({ count: 0 });
</script>

<template>
  <!-- 修改内部属性，不会触发响应式更新 -->
  <button @click="shallowState.value.count++">修改内部属性：{{ shallowState.count }}</button>
  <br><br>
  <!-- 替换.value的引用，会触发响应式更新 -->
  <button @click="shallowState.value = { count: shallowState.value.count + 1 }">替换引用：{{ shallowState.count }}</button>
</template>

这个示例里，第一个按钮点击后，count数值不会变化（因为shallowRef不监听内部属性）；第二个按钮点击后，count会正常更新（因为替换了.value的引用），完全符合官方文档的说明。

内容的提问来源于stack exchange，提问作者Polymath