Vue 3中reactive处理原始值及对象重赋值的响应性异常问题解析

嘿，这个问题挺有意思的，刚好戳中了Vue响应式系统里容易混淆的细节点，咱们一步步拆解来看～

首先先回顾下官方文档的结论：reactive只能给对象、数组这类复杂类型添加响应性，处理原始值（数字、字符串等）时完全无效；如果直接给reactive创建的响应式对象变量重赋值，也会丢失响应性。但你的两个代码片段里，看似“失效”的场景却能正常更新页面，其实这是组件重新渲染带来的“假响应性”，不是Vue响应式系统在自动工作。

代码片段1：reactive处理原始值的情况 #

先看你的代码：

<script setup>
import { ref, reactive } from 'vue';
let counter1 = ref(0);
let counter2 = reactive(0);
const increment = () => {
  // counter1.value++;
  counter2++;
}
</script>
<template>
  <h3>counter1 {{ counter1 }}</h3>
  <h3>counter2 {{ counter2 }}</h3>
  <button @click="increment">increment</button>
</template>

为什么counter2能更新？ #

其实这里的counter2从始至终都不是响应式的：

• reactive的源码逻辑里，如果传入的是原始值，会直接返回这个值本身，不会做任何响应性包装。所以let counter2 = reactive(0)等价于let counter2 = 0，就是个普通的数字变量。
• 当你点击按钮触发increment时，counter2++是给这个普通变量重新赋值。而Vue的事件处理函数执行完毕后，会自动触发组件的重新渲染，模板会重新读取所有变量的最新值，所以页面上能看到counter2的更新。

但这不是真正的响应式——如果把counter2++放到一个不会触发组件自动更新的地方，比如：

const increment = () => {
  setTimeout(() => {
    counter2++;
  }, 1000);
}

这时候页面就不会自动更新了，因为setTimeout里的操作不会触发Vue的组件刷新，你得手动调用forceUpdate才能让页面显示最新值，这就能区分开“组件刷新带来的更新”和“响应式系统的自动追踪”。

代码片段2：给reactive对象变量重赋值的情况 #

再看这段代码：

<script setup>
import { ref, reactive } from 'vue';
let state1 = ref({ counter: 0 });
let state2 = reactive({ counter: 0 });
const increment = () => {
  // state1.value = { counter: state1.value.counter + 1 };
  state2 = { counter: state2.counter + 1 };
}
</script>
<template>
  <h3>counter1 {{ state1.counter }}</h3>
  <h3>counter2 {{ state2.counter }}</h3>
  <button @click="increment">increment</button>
</template>

为什么state2.counter能更新？ #

这里的逻辑和片段1类似：

• 一开始state2是reactive创建的响应式对象，但当你执行state2 = { counter: state2.counter + 1 }时，本质是把state2这个变量重新赋值成了一个普通的新对象，原来的响应式对象已经被丢弃了，新对象完全没有响应性。
• 同样，因为点击按钮的事件处理函数执行完毕后，Vue会自动刷新组件，模板重新读取state2的最新值（也就是那个新普通对象的counter），所以页面能看到更新。

同样做个测试：把赋值操作放到setTimeout里，页面就不会自动更新了，因为没有触发组件的刷新机制。

总结一下本质 #

这两种情况都不是Vue响应式系统在起作用，而是Vue在事件处理函数执行后会自动触发组件重新渲染，让模板能读取到变量的最新值，看起来像是响应式更新。

真正的响应式是：当你修改reactive对象的内部属性（比如state2.counter++），或者修改ref的.value时，Vue的响应式系统会追踪到这个变化，自动通知依赖更新，不需要依赖组件的强制刷新。

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