vue2修改数组或对象，但视图不刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2修改数组或对象，但视图不刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：我们在vue2开发过程中会碰到数据更新，但是页面并未改变的情况，原因如下：

第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到；

第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到；

vue2修改数组或对象，但视图不刷新

解决办法：

1. Vue.$set(官方推荐)

this.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)

    change() {
      this.$set(this.obj.list, 0, {...this.obj.list[0],age:28}) //只修改数组中某个元素的某个属性
      this.$set(this.obj.list, 1, { name: '小红',age: 18})
      
  
    },

2. v-if静默刷新

    <div v-if="bol">
      <div v-for="item in obj.list">
        {{item.name}}
      </div>
      <button @click="change">修改</button>


    </div>

    change() {
      this.bol = false
      this.obj.list[1] = {
        name: '小红',
        age: 18
      }
      this.bol = true
    },

3. Vue.$forceUpdate(手动强制更新视图)

    change() {
      this.obj.list[0] = {
        ...this.obj.list[0],
        age: 28
      }
      this.obj.list[1] = {
        name: '小红',
        age: 18
      }
      this.$forceUpdate()
    },

4.Object.assign(使用修改栈能触发视图更新的特性)

    change() {
      this.obj.list[0] = {
        ...this.obj.list[0],
        age: 28
      }
      this.obj.list[1] = {
        name: '小红',
        age: 18
      }
      this.obj = Object.assign({},{
        ...this.obj
      })
    },

5.对于数组还可以使用splice方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()文章来源地址https://www.toymoban.com/news/detail-511651.html

    change() {
      this.obj.list[0] = {
        ...this.obj.list[0],
        age: 28
      }
      this.obj.list[1] = {
        name: '小红',
        age: 18
      }
      this.obj.list = this.obj.list.concat([])
    },

到了这里，关于vue2修改数组或对象，但视图不刷新的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！