Vue 之数组

1.问题

今天用Vue的时候，发现一个问题：

    array[index].flag = ture

对应的视图不发生变化
最后多方查寻发现，VUE对数组的直接操作index赋值监测不了
也就是说 下面这个代码最好不要在VUE中使用

    this.arr[index]={...}

2.解决方法

官网专门提供了这种检查不了属性变化的API

Vue.set( object, key, value )

参数：

{Object} object
{string} key
{any} value
返回值： 设置的值.

用法：

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象

使用实例：

this.$set(this.arr,index,value)

3.个人简单分析

在操作的过程中发现，没有被监测到的属性都有一个共同的特征，对应的属性没有对应的get,set方法。

我们再想想，VUE所谓的双向绑定是如何实现的呢？我们想一想是不是可以在对应的属性的set方法上做手脚，每一次对属性赋值的时候，都会触发set方法，set方法不就是一个万能的监听器了？

我想，通过$set主要就是对属性添加setter方法，进行监听。当然，我还只是一个刚刚接触的小白，还没有对VUE源码进行分析，这里只是一点小小的分析，希望对入坑的你有点帮助。