Vue3 setup中更新数组后v-for未重新渲染问题求助

问题根源：你用var声明的notificationData是普通JS数组，不是Vue的响应式数据。Vue无法检测普通数据的变化，所以修改数组后视图不会更新。

解决方法有两种，任选其一即可：

方法一：使用ref创建响应式数组 #

ref是Vue3中创建响应式数据的常用API，支持基本类型、数组和对象，修改时需要通过.value访问：

<script setup lang="ts">
import { ref } from 'vue';

// 用ref包裹数组，使其成为响应式数据
const notificationData = ref([
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
]);

setInterval(() => {
  console.log("setInterval");
  console.log(notificationData.value);
  // 修改ref包裹的数组必须访问.value
  notificationData.value.push({
    icon: "bi bi-credit-card text-theme",
    title: "PAYMENT METHOD ENABLED",
    time: "10 MINUTES AGO",
  });
}, 10000);
</script>

方法二：使用reactive创建响应式数组 #

reactive适合处理对象或数组类型的响应式数据，不需要.value直接操作，但注意不能直接替换整个数组（比如不能写notificationData = []，要通过修改原数组的方法如push、splice等更新）：

<script setup lang="ts">
import { reactive } from 'vue';

// 用reactive创建响应式数组
const notificationData = reactive([
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
]);

setInterval(() => {
  console.log("setInterval");
  console.log(notificationData);
  notificationData.push({
    icon: "bi bi-credit-card text-theme",
    title: "PAYMENT METHOD ENABLED",
    time: "10 MINUTES AGO",
  });
}, 10000);
</script>

额外优化建议 #

v-for的key尽量不要用数组索引index，如果你的通知项有唯一标识（比如id），改用唯一标识作为key，可以避免列表更新时DOM复用导致的异常问题。

内容的提问来源于stack exchange，提问作者Pascal de Sélys