Vue.js中reactive响应式数组无法整体更新的问题

你的问题出在对reactive创建的响应式数组使用了.value赋值——reactive返回的是目标对象/数组的代理，它本身没有.value属性，直接给arr.value赋值只是给这个代理对象新增了一个无关的属性，根本没修改原数组，自然不会触发视图更新。

两种修正方案： #

方案1：改用ref创建响应式数组（推荐，更直观处理值替换）

ref用于包裹单个值或引用类型，需要通过.value访问和修改：

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

const arr = ref([2,4,6])

setTimeout(()=> { arr.value = [1, 3, 5, 7] }, 500)
</script>

<template>
  <h2 v-for="v in arr"> val {{ v }}</h2>
</template>

方案2：保留reactive，用正确方式更新数组

如果坚持用reactive，有两种方式触发更新：

• 重新赋值为新的reactive代理数组
• 使用数组的可变方法（如splice）替换原数组内容

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

// 注意这里要用let，因为要重新赋值
let arr = reactive([2,4,6])

setTimeout(()=> { 
  // 方式1：重新创建reactive数组
  arr = reactive([1, 3, 5, 7])
  
  // 方式2：用splice替换原数组所有元素
  // arr.splice(0, arr.length, ...[1,3,5,7])
}, 500)
</script>

<template>
  <h2 v-for="v in arr"> val {{ v }}</h2>
</template>

核心区别 #

• reactive：针对对象/数组的代理，修改时直接操作代理对象本身（比如数组的push、splice，或对象属性赋值），不需要.value。如果要完全替换数组，要么重新赋值为新的reactive实例，要么用可变方法修改原数组。
• ref：包裹任意类型的值，必须通过.value访问和修改，替换整个值时直接改.value即可，视图会自动更新。

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