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