vuejs 之 $set

有次在作业的时候，业务需要，点击改变某个数组的某个数据，然而，数组改变了视图却没有更新，各种尝试都没有解决，后来，在网上查资料，了解了vuejs的$set

首先说下我了解到的视图不更新的原因，网上说的原因主要是受制于ES5的限制，vuejs不能检测到对象属性的变化，只能检测到data对象上的变化。

引用别的博客总结的vuejs能检测带对象变化的·方法和不能检测到的

• Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： 
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  • vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
  • filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
• Vue 不能检测以下变动的数组： 
  • ① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
  • ② 当你修改数组的长度时，例如： vm.items.length = newLength

下面说些我在工作中遇到的例子

             <ul>
                        <li v-for="(item,key) in arrList">
                            {{item}}
                        </li>
                    </ul>

<Button type="primary" @click="changeItem()">点击我改变数组</Button>

changeItem(){
                this.arrList[2]="4"
                console.log(this.arrList）
            }

发现视图并没有因为执行了changeItem函数而发生改变，但打印的数组数据已经改变，原因就是因为vue不能检测利用索引改变值得这种情况，结果如下

现在换成$set代码和结果如下

在数组改变的同时，视图也发生了改变