【Vue2.x 源码学习】第二十五篇 - 数组依赖收集的原理

一，前言

上篇，主要介绍了 Vue 的异步更新流程，主要涉及以下几点：

• 为什么要做异步更新

• 异步更新的实现思路

• 数据变更缓存的位置

• 缓存 watcher 更新逻辑

• vm.$nextTick 获取更新后的 dom

• 测试异步更新

本篇，数组的依赖收集

二，数组的依赖收集

1，前情回顾

上一篇，解决了对象的依赖收集，

• 取值时走 getter，进行依赖收集；

• 赋值时走 setter，出发视图更新；

但是，数组类型是不走 Object.defineProperty 的

那么，数组如何进行依赖收集？当数据变化时，如何进行视图更新？

本篇，继续完善数组的依赖收集；

2，数组的响应式实现

在响应式实现中，数组数据类型是通过重写能够改变原数组的 7 个方法实现的

收集数组所依赖的渲染 watcher，当数组更新时，触发对应 watcher 更新即可

3，数组的依赖收集方案

对象的依赖收集方案：为对象的每一个属性都增加一个 dep 属性用于做依赖收集

同理，也可以为数组增加 dep 属性用于收集依赖，

当数组更新时，通知数组依赖做视图更新

4，数组依赖收集的入口

class Observer {  constructor(value) {    Object.defineProperty(value, '__ob__', {      value:this,      enumerable:false    });    if (isArray(value)) {      value.__proto__ = arrayMethods;      this.observeArray(value);    } else {      this.walk(value);    }  }

对象或数组类型的数据会通过 new Observer 创建 observer 实例，

所以，Observer 中的 value 可能是数组，也可能是对象；

Observer 类中 value 也就是 this，是指 observer 实例，并为其添加`__ob__`属性

这样，每个对象或数组都有一个 __ob__ 属性，

因此，可在此处为 observer 实例添加 dep 属性

这就相当于为数组或对象本身都增加了一个 dep 属性

这样就可以在对象或数组上，通过`value.__ob__.dep` 取到 dep

从而当数组数据变化时，通过 dep 中收集的 watcher 实现触发视图更新操作

三，结尾

本篇，主要介绍了数组依赖收集的原理

• 数组的响应式实现

• 数组的依赖收集方案介绍

下一篇，数组依赖收集的实现