Vue3深度响应式问题：menu[0].disabled为何不具备响应性？

我遇到一个简单的Vue3场景无法正常运行，代码如下：

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

const disabled = ref(false);

const menu = reactive<[]>([
  {
    disabled: disabled.value
  }
 ]);
</script>

<template>
  
  {{disabled}}
  <button @click="disabled = !disabled">
    Toggle
  </button>
  
  <br>
  {{menu[0]?.disabled}}
</template>

点击Toggle按钮时，disabled的值会变化，但menu[0].disabled始终不会更新，请问哪里出错了？

原因分析 #

问题出在你直接将disabled.value的当前快照值赋值给了menu[0].disabled——原始类型（布尔值）的赋值是值传递，只是把当时的false这个静态值存进了reactive数组里，并没有和disabled这个ref建立响应式关联。当disabled的value更新时，menu[0].disabled作为一个普通布尔值，不会自动同步变化。

解决方案 #

有两种常用的修复方式：

方式1：直接引用ref对象（不取值） #

把disabled这个ref对象直接放进reactive数组，Vue会在模板中自动解包ref的值：

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

const disabled = ref(false);

const menu = reactive([
  {
    disabled // 直接传入ref对象，不使用.value
  }
 ]);
</script>

<template>
  {{disabled}}
  <button @click="disabled = !disabled">
    Toggle
  </button>
  
  <br>
  {{menu[0]?.disabled}} <!-- Vue自动解包ref，直接显示最新值 -->
</template>

方式2：利用getter创建响应式关联 #

在reactive对象中通过getter函数关联disabled.value，每次访问时都会读取最新值：

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

const disabled = ref(false);

const menu = reactive([
  {
    get disabled() {
      return disabled.value
    }
  }
 ]);
</script>

<template>
  {{disabled}}
  <button @click="disabled = !disabled">
    Toggle
  </button>
  
  <br>
  {{menu[0]?.disabled}}
</template>

内容的提问来源于stack exchange，提问作者Demiro-FE-Architect