在 Vue 3 组合式 API 中，将 ref 的 .value 直接存入数组会导致响应性丢失；必须存储 ref 本身，并在模板中显式访问 .value 才能保持响应式更新。
在 vue 3 组合式 api 中，将 ref 的 `.value` 直接存入数组会导致响应性丢失；必须存储 ref 本身，并在模板中显式访问 `.value` 才能保持响应式更新。
问题根源在于：const selectedColors = [ColorHeader.value, ColorBody.value, ColorFooter.value] 创建的是一个纯字符串数组（string[]），而非对 ref 的引用数组。Vue 的响应式系统无法追踪该数组内部值的变化——因为 ref.value 被“解包”后已脱离响应式上下文，后续对 ColorHeader.value 的修改不会自动同步到 selectedColors[0]。
✅ 正确做法是：将 ref 实例本身存入数组，形成 Ref<string>[]，并在模板中通过 .value 显式读取：
// ✅ 正确：存储 ref 实例，保留响应性 const selectedColors = [ColorHeader, ColorBody, ColorFooter]
随后，在模板中使用时需显式访问 .value（Vue 模板不会自动解包嵌套 ref）：
<div id="app">
<div class="app">
<!-- 注意：selectedColors[0].value -->
<div class="header" :style="'background-color:' + selectedColors[0].value + '!important;'">
<h1>Header</h1>
</div>
<div class="content" :style="'background-color:' + selectedColors[1].value + '!important;'">
<p>This is the main content area.</p>
</div>
<div class="footer" :style="'background-color:' + selectedColors[2].value + '!important;'">
<p>Footer</p>
</div>
</div>
</div>同时，v-for 部分无需修改（因 color 现为 Ref<string>，VColorPicker v-model 仍可直接绑定）：
立即学习“前端免费学习笔记（深入）”；
<VMenu v-for="(color, index) in selectedColors" :key="index" location="bottom">
<template #activator="{ props }">
<VBtn width="260" :color="color.value" v-bind="props">
<p class="p-color">
Header Color <br /><span class="text-uppercase">{{ color.value }}</span>
</p>
</VBtn>
</template>
<VList>
<!-- v-model 自动处理 ref，无需 .value -->
<VColorPicker hide-inputs="true" v-model="color" />
</VList>
</VMenu>⚠️ 注意事项：
- v-model 绑定 ref 时 Vue 会自动处理 .value，但插值表达式（如 {{ color }}）或属性绑定（如 :color="color"）中，若 color 是 ref，必须写 color.value；
- 不要对 ref 数组使用 .map(r => r.value) 或展开运算符生成新数组，这会再次破坏响应性；
- 如需逻辑复用，可封装为计算属性：const headerColor = computed(() => ColorHeader.value)，但本场景直接使用 .value 更简洁高效。
总结：Vue 的响应式依赖于对象/数组的代理劫持，而基本类型（如字符串）无法被代理。只有 ref、reactive 等响应式包装器才能触发依赖收集与更新。因此，凡需在集合中维护响应性，务必保存响应式对象本身，而非其解包后的原始值。
