Array的变化侦测（一）

如何追踪变化

为什么对于Array的侦测方式和Object的不同？如下一句push操作，调用的是数组原型上的方法改变数组，不会触发getter/setter。

this.list.push(1);

在ES6之前，JavaScript并没有提供元编程的能力，足以拦截原型方法。Vue的做法是写自定义方法覆盖原型方法。

使用拦截器覆盖原生原型方法.png

用一个拦截器覆盖Array.prototype，每当我们调用原型方法操作数组时，调用的都是自定义方法，就可以跟踪到变化了。

拦截器

拦截器和Array.prototype一样也是一个对象，包含的属性也一样，只是一些能改变数组的方法是处理过的。
整理一下，发现数组原型可以改变数组自身内容的方法有七个：push、pop、shift、unshift、splice、sorte和reverse。

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sorte',
    'reverse'
].forEach(function(method){
    // 缓存原始方法
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function mutator(...args){
            return original.apply(this, args);
        },
        enumerable: false,
        writeable: ture,
        configurable: true
    })
})

这样我们就可以在mutator函数中做一些事情了，比如发送变化的通知。

使用拦截器覆盖Array原型

export class Observer{
    constructor(value){
        this.value = value;
        if(Array.isArray(value)){
            value.__proto__ = arrayMethods;
        } else {
            this.walk(value);
        }
    }
}

__proto__其实是Object.getPrototypeOf和Object.setPrototypeOf的早期实现，只是ES6的浏览器支持度不理想。

使用__proto__覆盖原型.png

将拦截器方法挂载到数组属性上

并不是所有浏览器都支持通过__proto__访问原型，所以还要处理不能使用这个非标准属性的情况。
Vue的做法非常粗暴，直接将arrayMethods身上的方法设置到被侦测数组上。

const hasProto = '__proto__' in {};
const arrayKeys = Object.getOwnPropertyNames(arrayMethods);

export class Observer{
    constructor(value){
        this.value = value;
        if(Array.isArray(value)){
            const augment = hasProto ? protoAugment : copyAugment;
            augment(value, arrayMethods, arrayKeys);
        } else {
            this.walk(value);
        }
    }
}
function protoAugment(target, src, keys){
    target.__proto__ = src;
}
function copyAugment(target, src, keys){
    for(let i = 0, l = keys.length;i < l;i++){
        const key = keys[i];
        def(target, key, src[key]);
    }
}

如何收集依赖

我们创建拦截器实际上是为了获得一种能力，一种感知数组内容发生变化的能力。现在具备了这个能力，要通知谁呢？根据前面对Object的处理，通知Dep中的依赖（Watcher）。
怎么收集依赖呢？还用getter。

function defineReactive(data, key, val){
    if(typeof val = 'object'){
        new Observer(val);
    }
    let dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function(){
            dep.depend();
            // 这里收集依赖
            return val;
        },
        set: function(newVal){
            if(val === newVal){
                return;
            }
            dep.notify();
            val = newVal;
        }
    })
}

新增了一段注释，也就是说Array在getter中收集依赖，在拦截器触发依赖。

依赖收集在哪

export class Observer{
    constructor(value){
        this.value = value;
        this.dep = new Dep(); // 新增dep
        if(Array.isArray(value)){
            const augment = hasProto ? protoAugment : copyAugment;
            augment(value, arrayMethods, arrayKeys);
        } else {
            this.walk(value);
        }
    }
}

Vue将依赖列表存在了Observer，为什么是这里？
前面说Array在getter中收集依赖，在拦截器触发依赖，所以依赖的位置很关键，保证getter要访问的到，拦截器也访问的到。

收集依赖

Dep实例保存在Observer的属性上后，我们开始收集依赖。

function defineReactive(data, key, val){
    let childOb = observe(val); // 修改
    let dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function(){
            dep.depend();
            
            // 新增
            if(childOb){
                childOb.dep.depend();
            }
            return val;
        },
        set: function(newVal){
            if(val === newVal){
                return;
            }
            dep.notify();
            val = newVal;
        }
    })
}

export function observe(value, asRootData){
    if(!isObject(value)){
        return;
    }
    let ob;
    if(hasOwn(value, '__ob__')&&value.__ob__ instanceof Observer) {
        ob = value.__ob__;
    } else {
        ob = observe(val);
    }
    return ob;
}

增加一个childOb 的意义到底是啥？在于搭建了从getter把依赖收集到Observer的dep中的桥梁。

在拦截器中获取Observer

因为拦截器是对数组原型的封装，所以拦截器可以访问到this（正在被操作的数组）。而dep在Observer中，所以需要在this上读到Observer实例。

// 工具函数
function def(obj, key, val, enumerable){
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writeable: true,
        configurable: true
    })
}
export class Observer{
    constructor(value){
        this.value = value;

        def(value, '__ob__', this); // 新增
        if(Array.isArray(value)){
            const augment = hasProto ? protoAugment : copyAugment;
            augment(value, arrayMethods, arrayKeys);
        } else {
            this.walk(value);
        }
    }
}

现在Observer实例已经存入数组中__ob__属性，下一步就是在拦截器中获取。

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sorte',
    'reverse'
].forEach(function(method){
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function mutator(...args){
            const ob = this.__ob__; // 新增
            return original.apply(this, args);
        },
        enumerable: false,
        writeable: ture,
        configurable: true
    })
})

向数组的依赖发通知

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sorte',
    'reverse'
].forEach(function(method){
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function mutator(...args){
            const ob = this.__ob__;
            ob.dep.notify(); // 向依赖发通知
            return original.apply(this, args);
        },
        enumerable: false,
        writeable: ture,
        configurable: true
    })
})

既然能获取到Observer实例和里面的依赖列表了，就直接调用notify。

剩下的内容就是获取数组元素变化，以及Vue的处理方式的弊端，另开一篇写吧。