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

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

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

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

 

解决办法：

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()

    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([])
    },