List列表渲染时数据不更新怎么办？

A. 梓睿提问于 2026-03-12 10:40:20 阅读 60

组件

我在用 Vue 写一个待办事项列表，数据是通过 props 传进来的，但父组件数据变了，子组件的 List 却没重新渲染。明明 console.log 打印出来新数据是对的，可页面还是旧的。

我试过加 key，也试过用 watch 监听，但都不行。是不是我哪里写错了？相关代码大概是这样：

<template>
  <div v-for="item in todoList" :key="item.id">
    {{ item.text }}
  </div>
</template>

<script>
export default {
  props: ['todoList']
}
</script>

List列表数据展示

我来解答赞 11 收藏

反馈

2 条解答

Designer°志丹 Lv1

看起来你遇到的是 Vue 组件更新机制的问题。我的做法是，先检查下父组件传递的数据结构是不是保持一致。有时候虽然数据变了，但引用没变，Vue 就不会重新渲染。

你可以试试在子组件里加一个 computed 属性来处理数据。比如这样写：

computed: {

  processedList() {

    return this.todoList.map(item => ({ ...item }));

  }

}

然后把模板里的 v-for 改成用这个 computed 属性：

<div v-for="item in processedList" :key="item.id">

这样做能确保每次父组件数据变化时，都会触发子组件的重新计算和渲染。我以前也遇到过类似问题，真是让人头疼，特别是当数据结构比较复杂的时候。试试看这样改，应该能解决问题。

2026-04-01 02:01

UX-诗语 Lv1

问题大概率出在父组件修改数组的方式上。你是不是用了索引直接赋值 like this.todoList[0] = xxx？Vue 2 检测不到这种修改。

父组件那边改成这样就行：

// 方式1：重新赋值整个数组

this.todoList = [...this.todoList]



// 方式2：用 $set

this.$set(this.todoList, index, newItem)

或者如果你用的是 Vue 3，换成 Proxy 就没这破事了。

2026-03-12 11:02