Vue源码解析：如何实现Array数据变化的侦测？

本文共计2358个文字，预计阅读时间需要10分钟。

摘要：Vue的响应式机制主要通过Object.defineProperty实现数据绑定。虽然这种方式适用于Object类型，但对于Array类型，通过set/get方式是无效的。但Vue作者采用了一种特殊方法来实现Array的响应式。

摘要

我们都知道Vue的响应式是通过Object.defineProperty来进行数据劫持。但是那是针对Object类型可以实现, 如果是数组呢? 通过set/get方式是不行的。

但是Vue作者使用了一个方式来实现Array类型的监测: 拦截器。

核心思想

通过创建一个拦截器来覆盖数组本身的原型对象Array.prototype。

拦截器

通过查看Vue源码路径vue/src/core/observer/array.js。

/** * Vue对数组的变化侦测 * 思想: 通过一个拦截器来覆盖Array.prototype。 * 拦截器其实就是一个Object, 它的属性与Array.prototype一样。 只是对数组的变异方法进行了处理。