Vue中普通数组无法触发响应式更新问题求助

你的问题出在**entries不是响应式数据**——Vue无法追踪普通JavaScript数组的变化，所以你调用push修改数组后，页面不会自动更新。

两种修复方案： #

方案1：用ref创建响应式数组 #

这是处理简单数组最常用的方式：

<template>
  <button @click="entries.push(3)">
    Press me!
  </button>
  <ul>
    <li v-for="entry in entries" :key="entry">
      {{ entry }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
// 用ref包裹数组，创建响应式数据
const entries = ref([1, 2])
</script>

模板代码不用修改，因为Vue会自动解包ref对象的.value属性，直接使用变量名即可。

方案2：用reactive创建响应式对象包裹数组 #

如果需要管理多个关联数据，适合用这种方式：

<template>
  <button @click="state.entries.push(3)">
    Press me!
  </button>
  <ul>
    <li v-for="entry in state.entries" :key="entry">
      {{ entry }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue'
// 把数组放在reactive对象中，保持引用不变
const state = reactive({
  entries: [1, 2]
})
</script>

Vue的响应式系统依赖自身提供的API（ref/reactive）包装数据，才能追踪数据变化并触发页面更新，普通JS变量无法被Vue的响应式机制识别。

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