修改JavaScript数组后Vue列表未更新的问题排查

核心问题 #

你的代码里，items是用普通const声明的数组，不是Vue的响应式数据。Vue无法追踪普通JS变量的变化，所以调用items.push()添加新元素时，页面不会自动更新。另外，你在<script setup>里混用了Options API的data写法，这在Composition API语法糖里完全无效。

修正后的代码 #

<script setup>
import '/js/control.js';
import '/js/websocket';

// 用ref创建响应式数组
const items = ref([
  {
    "timestamp": "b",
    "Message": "Hallo",
    "SourceInfo": "",
    "Counter": 0
  }
])

function more() {
  console.log(items.value);
  // 操作ref包裹的数组必须通过.value访问
  items.value.push({
    "timestamp": "r",
    "Message": "b",
    "SourceInfo": "",
    "Counter": 0
  });
}
</script>

<template>
  <div class="someclass">
    <ul>
      <!-- 给v-for元素加唯一key，提升DOM更新效率 -->
      <li v-for="item in items" :key="item.timestamp">
        {{item.timestamp}} - {{item.Message}}
      </li>
    </ul>
    <button @click="more">more</button>
  </div>
</template>

<style>
.someclass {
  /* background-image: url('/SW4_EG.jpg'); */
  /* background-repeat: no-repeat;
  width: 983px;
  height: 537px; */
  position: relative;
}
</style>

关键修正点 #

• 响应式声明：用ref()包裹数组，让Vue能追踪数组的变化。Nuxt3的<script setup>会自动导入ref，无需额外引用。
• 响应式数据操作：脚本里操作ref包裹的数组必须用.value，模板中可以直接用items，Vue会自动解包。
• v-for的key：给循环元素加:key，帮助Vue精准识别DOM元素，避免更新时出现异常。

WebSocket场景补充 #

后续处理WebSocket推送的数据时，同样要通过items.value.push()这类方式更新数组，才能让页面实时响应。示例：

// WebSocket消息处理示例
ws.onmessage = (event) => {
  const newData = JSON.parse(event.data);
  items.value.push(newData);
}

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