vue中数组，根据数组下标来修改时视图不更新问题

有的时候，会动态根据数组下标索引值来修改指定某一项的值时候，会发现，data里面的值，已经改变了，但视图没有更新。如果你的项目时vue v3.0 版本以下，就会出现这样的问题。此问题很常见，解决起来也很简单。

<template>
  <div class="demo-wrap">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [{name: 'hehe', age: 35},
        {name: 'hehe1', age: 11},
        {name: 'hehe2', age: 22},
        {name: 'hehe3', age: 33},
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      // （一）$set ---> this.$set(需要修改的数组, 需要修改的数组下标, { "要修改的数组对象，一个/多个" }) --有效?
      this.$set(this.list, 2, {name: 'heh999e1', age: 11})

      // （二）$forceUpdate --有效?
      // this.list[2] = {name: 'heh999e1', age: 11}
      // this.$forceUpdate()

      // （三）根据数组下标索引来改变某一项，Vue2.0是无法检测到[v3.0底层支持数组检测]，导致模板视图没有及时跟新 --无效?
      // this.list[2] = {name: 'heh999e1', age: 11}

      // （四）整个数组整体大换药 --有效?
      // this.list = [{name: 'heh999e1', age: 11}]
    }
  }
}
</script>