【手写 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 实现触发视图更新操作

三结尾

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

• 数组的响应式实现
• 数组的依赖收集方案介绍

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