Vue源码中如何实现长尾词对数组数据侦听的功能？

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

摘要：Vue的响应式机制通过Object.defineProperty实现数据绑定。然而，这种方法仅适用于Object类型，对于数组则通过set/get方式实现。但Vue作者采用了特定方法来实现数组的响应式。

摘要

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

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

核心思想

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

拦截器

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

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