Vue2对数组与对象的响应式处理

>在 Vue 2 中，当你把一个普通的 JavaScript 对象传入 Vue 实例作为 `data` 选项，Vue 将遍历此对象所有的 property，并使用 [`Object.defineProperty`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 把这些 property 全部转为 [getter/setter](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#%E5%AE%9A%E4%B9%89_getters_%E4%B8%8E_setters)。`Object.defineProperty ` 是 ES5 中一个无法 shim 的特性，这天然的导致无法监听到数组与对象内部的变化，同时也是 Vue 不支持 IE8 以及更低版本浏的原因。 ### 对于对象 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。 - `Vue.set(vm.someObject, 'b', 2)` - `this.$set(this.someObject,'b',2)` - `this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })` ### 对于数组 Vue 不能检测以下数组的变动： 1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue； 2. 当你修改数组的长度时，例如：vm.items.length = newLength； 解决方法： 1. `vm.$set(vm.items, indexOfItem, newValue)` 2. `vm.items.splice(newLength)` 同时重写了 Array 的多个方法：（ *能改变原有数组的API基本都重写了* ） - push - pop - shift - unshift - splice - sort - reverse 方便用户实现数组的响应式