Vue中Ref作为Reactive属性参数的三类行为疑问咨询

问题背景 #

我正在学习Vue官方文档的「Ref解包补充细节」章节，为区分普通ref与传入reactive对象属性的ref的差异，编写了示例代码，现存在三类疑问：

1. 为何count初始设为0时，console.log("count:", count)输出对象？
2. 为何count赋值为1和2时，console.log("count:", count)分别输出1和2？
3. 为何count为1、2、3时，console.log("state:", state)始终输出同一个对象？

示例代码 #

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref,reactive } from 'vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<script setup>
let count = ref(0)
const state = reactive({count})

console.log("------------count = 0----------------");
console.log("count:",count)
console.log("count.value:",count.value);
console.log("state:",state)
console.log("------------count = 1----------------");
count = 1
console.log("count:",count);
console.log("count.value:",count.value);
console.log("state:",state);
console.log("------------count = 2----------------");
count = 2
console.log("count:",count);
console.log("count.value:",count.value);
console.log("state:",state);
</script>

运行结果 #

疑问解答 #

1. 为何count初始设为0时，console.log("count:", count)输出对象？ #

ref()创建的是Ref包装对象，本质是一个包含.value属性的容器，用来维护内部的响应式值。初始时你用ref(0)生成了这个包装对象，直接打印count就是打印这个容器本身，所以控制台会显示Ref对象的结构。

2. 为何count赋值为1和2时，console.log("count:", count)分别输出1和2？ #

这里你直接覆盖了count变量的引用：原本count指向的是Ref包装对象，执行count = 1时，你把count变量重新赋值成了普通数值1，它不再是Ref对象了。后续打印count自然就是这个普通数值，而非包装对象——这也能解释之后访问count.value会报错，因为普通数字没有.value属性。

3. 为何count为1、2、3时，console.log("state:", state)始终输出同一个对象？ #

创建state = reactive({count})时，Vue会把传入的Ref对象解包，将内部的原始值（初始为0）存入reactive对象。但后续你修改的是外部的count变量（直接赋值为1、2），这和state内部的属性毫无关联——state保存的是当初Ref解包后的值的引用，你覆盖外部count的操作不会影响state内部已有的属性。另外，state是用const声明的常量，它的引用永远不会改变，所以每次打印state都是同一个对象，且内部的count值始终是初始的0。

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