vue可响应式的数组方法

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，从而使它关联的组件重新渲染

vue3.0 响应式原理

vue3.0 基于 Proxy 来做数据的劫持代理，可以原生支持到数组的响应式，不需要重写数组的原型，还可以直接检测数组和对象属性的新增和删除

Proxy 和 Object.definedProperty 的区别：

通常情况下我们想要监视数组的变化，基本要依靠重写数组方法的方式实现，这也是 Vue 的实现方式，而 Proxy 可以直接监视数组的变化

• Object.defineProperty 只能监听到属性的读写
• Proxy 除读写外还可以监听属性的增加和删除