vue-数据变了，但视图没有更新

最新推荐文章于 2025-03-22 10:08:14 发布

原创最新推荐文章于 2025-03-22 10:08:14 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文探讨了在Vue中遇到的数据变更不更新视图的问题，重点在于vm.items[indexOfItem]=newValue操作无法触发视图刷新。通过示例代码展示，确认了这种直接修改数组元素的方式在Vue中是无法被观测到的。为确保视图响应数组变化，文章提到了正确的方法，如使用push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()，以及$set方法。并提供了一个简单的Vue组件实例来验证这一行为。

今天写代码的时候发现数据变更了，但是视图没有更新
百度了一下发现vm.items[indexOfItem] = newValue 是监测不到的
特意写了一个页面验证一下，确实是监测不到的
在这里插入图片描述
输出

然后发现，视图要响应数组的改变需要
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
还有 set

<template>
  <!-- 验证vm.items[indexOfItem] = newValue是否真的无效 -->
  <div>
    <div>{{aa}}</div>
    <ul>
      <li v-for="item in list"
          :key="item.id">
        {{item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'testWuXiao',
  data () {
    return {
      aa: 'abcdefg',
      list: [
        {
          id: '1', text: 'A'
        },
        {
          id: '2', text: 'A'
        }
      ]
    }
  },
  mounted () {
    this.aa = 'hijklmn'
    for (let i = 0; i < this.list.length; i++) {
      // this.list[i].text = 'B'
      this.$set(this.list[i], 'text', 'B')
    }
  }
}
</script>

<style scope lang="less">
</style>