Taro 中 Vue 写法下 v-for 渲染列表不更新怎么办？

司马会静提问于 2026-03-08 21:44:18 阅读 39

框架

我在 Taro 里用 Vue 语法写了个列表，数据变了但页面没重新渲染，明明 this.list 已经 push 了新项，是不是写法有问题？

试过用 $set 也不行，控制台打印数据是对的，就是 DOM 没变。

<template>
  <view class="list">
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  onShow() {
    this.list.push({ name: 'new item' })
  }
}
</script>

我来解答赞 11 收藏

反馈

2 条解答

利娜 Lv1

在 Taro 里用 Vue 写法时，遇到 v-for 渲染列表不更新的问题，通常是因为 Vue 的响应式系统没有检测到数组的变化。你提到已经尝试了 push 和 $set，但 DOM 还是没有更新。

这里有个常见的坑是，直接对数组进行索引赋值或者用 splice 等方法操作数组时，Vue 可能无法检测到变化。虽然你用的是 push，但也有可能是其他地方导致的问题。

首先，确保你的数据确实是在 Vue 的响应式系统中管理的。其次，可以试试在 onShow 里用 Vue 的 $set 方法来添加元素，确保每个元素都是响应式的。不过你已经试过了 $set 还是不行，那就换种方式吧。

一个常用的解决办法是用 concat 来创建一个新的数组，这样可以确保 Vue 能够检测到数组的变化：

onShow() {

  this.list = this.list.concat([{ name: 'new item' }]);

}

另外，检查一下 key 是否唯一且稳定。这里你用的是 index，如果列表项可能会动态增删，index 并不是一个好的选择，最好用唯一的 ID 做 key。

如果问题依然存在，可以在 onShow 里加个 this.$forceUpdate() 强制组件重新渲染，但这通常是最后的手段，因为可能隐藏了其他问题。

希望这些建议能帮到你，解决这个问题。

2026-03-22 16:07

萌新.芳妤 Lv1

这问题太常见了，Taro+Vue的坑我都踩烂了。关键点是数组的响应式问题，直接上解决方案：

1. 不要用push，改用concat或者直接赋值新数组：

this.list = this.list.concat({ name: 'new item' })

// 或者

this.list = [...this.list, { name: 'new item' }]

2. 如果非要原地修改，用Vue.set（在Taro里是this.$set）：

this.$set(this.list, this.list.length, { name: 'new item' })

3. 还有一种更骚的操作，强制刷新组件（不推荐但能应急）：

this.$forceUpdate()

我用第一种方案最多，简单省事。你的代码问题就是直接push了，Vue/Taro检测不到数组变化。

2026-03-08 22:04