vue可响应式的数组方法

由于 js 的限制，vue 不能检测以下数组的变动：

利用索引直接设置一个数组项时，例如：this.items[indexOfItem] = newValue
修改数组的长度时，例如：this.items.length = newLength

Vue.set() 方法利用索引为数组添加响应式元素：

Vue.set(Array, index, newValue) 或者 this.$set(Array, index, newValue)

vue 将被侦听的数组的`变异方法`（改变原数组的方法）进行了包裹，所以他们也将会触发视图更新：

push()：向数组的末尾添加一个或多个元素
pop()：删除数组的最后一个元素
unshift()：向数组的开头添加一个或更多元素
shift()：删除数组的第一个元素
sort()：对数组的元素进行排序
reverse()：颠倒数组中元素的顺序
splice()：向/从数组中添加/删除项目，然后返回被删除的项目（Vue.set() 对于数组的处理其实就是调用了 vue 包裹后的 splice 方法）

注：数组方法的使用请参考：JavaScript Array(数组)方法总结

vue2.0 响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter（Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因）这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染