Vue3中使用ref为何无法实现响应式？问题排查与修复

尝试点击按钮修改ref定义的value值，控制台显示值已变更，但Vue页面并未更新该值。代码示例如下：

<script setup>
import { ref } from 'vue'
let value = ref(false);
function update() {
    value =! value
    console.log(value); // 控制台显示值已变更
}
</script>
<template>
  <button @click="update">UPDATE</button>
  <p>
    {{ value }} - 页面未更新
  </p>
</template>

错误原因 #

你直接覆盖了ref()创建的响应式包装对象。ref()返回的是一个包含.value属性的响应式对象，当你执行value = !value时，相当于把原本的响应式对象替换成了普通布尔值，模板绑定的还是最初的响应式对象，因此页面不会更新。控制台打印的是新的普通值，所以看起来“变更了”，但和模板关联的已经不是同一个变量了。

修复方案 #

必须通过修改ref对象的.value属性来更新响应式值，不能直接替换整个变量。修改后的代码如下：

<script setup>
import { ref } from 'vue'
let value = ref(false);
function update() {
    value.value = !value.value
    console.log(value.value);
}
</script>
<template>
  <button @click="update">UPDATE</button>
  <p>
    {{ value }} - 现在可以正常更新
  </p>
</template>

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