Vue监听数组变化源码解析

Vue监听数组变化源码解析

上一篇的代码中，忽略了对数组的处理，只关心了需要关心的部分，假装数组不存在。

这一篇开始考虑数组的问题。

从最简单的入手

先考虑一个问题，如何监听数组中的对象变化？忽略掉数组本身及其中的一般值，只考虑对象数组中的对象。

遍历数组，而后对数组中的每个对象调用 observe 方法

// 上一篇中出现的未曾重写的代码，这一篇中不再重复

var Observer = function Observer(value) {

this.value = value;

this.dep = new Dep();

// 如果是数组，则遍历所有元素

if(Array.isArray(value)) {

this.observeArray(value);

} else {

this.walk(value);

}

};

Observer.prototype.observeArray = function observeArray(items) {

// 遍历数组所有元素，对单个元素进行 getter、setter 绑定

for (var i = 0, l = items.length; i < l; i++) {

observe(items[i]);

}

};

现实的要求

实际实现中当然不会如上例那么简单，官方文档中对监听数组是这样描述的：

vue 包含一组观察数组的突变方法，所以它们也将会触发视图更新。这些方法如下：

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于 javascript 的限制， Vue 不能检测以下变动的数组：

当你直接设置一个项的索引时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

所以，要对数组本身的一些方法进行监听。

经常要用到的一个小函数

def，在整个 Vue 源码中反复出现，利用Object.defineProperty() 在 obj 上定义属性 key（也又可能是修改已存在属性 key）：

function def(obj, key, val, enumerable) {

Object.defineProperty(obj, key, {

value: val,

// 转变为 boole 值，如果不传参，转为 false

enumerable: !!enumerable,

writable: true,

configurable: true

});

}

给对象添加一组方法

给对象添加一组方法，如果所在环境支持 proto，就简单了，直接把对象的 proto 指向这一组方法就好了；如果不支持，则遍历这一组方法，依次添加到对象中，作为隐藏属性（即 enumerable: false，不能被 in 关键字找到）:

var hasProto = '__proto__' in {};

var augment = hasProto ? protoAugment : copyAugment;

function protoAugmenhttp://t(target, src) {

target.__proto__ = src;

}

function copyAugment(target, src, keys) {

for(var i = 0; i < keys.length; i++) {

var key = keys[i];

def(target, key, src[key]);

}

}

先来一发简单的

var arrayPush = {};

(function(method){

var original = Array.prototype[method];

arrayPush[method] = function() {

// this 指向可通过下面的测试看出

console.log(this);

return original.apply(this, arguments)

};

})('push');

var testPush = [];

testPush.__proto__ = arrayPush;

// 通过输出，可以看出上面所述 this 指向的是 testPush

// []

testPush.push(1);

// [1]

testPush.push(2);

伪改写数组原型来监听数组的变化

如官方文档所言，所需监视的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 种方法，这 7 种方法有可分为两类：

1、push()、unshift()、splice() 这三种可能会给数组添加新元素的方法；

2、其余的不会新增元素的方法。

为了避免污染全局的 Array，新建一个以 Array.prototype 为原型的对象，而后在这个对象本身附加属性，再把这个新建的对象作为原型或者作为属性添加到 Observer 的 value 中，来达到监视其变化的目的。

var arrayProto = Array.prototype;

var arrayMethods = Object.create(arrayProto);

接着就是遍历需要触发更新的几个方法，依次将其附加到 arrayMethods 上：

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) {

// 获取原始的数组操作方法

var original = arrayProto[method];

// 在 arrayMethods 上新建属性 method，并为 method 指定值（函数）

// 即改写 arrayMethods 上的同名数组方法

def(arrayMethods, method, function mutator() {

var arguments$1 = arguments;

var i = arguments.length;

var args = new Array(i);

// 将伪数组 arguments 转变为数组形式

// 为何不用 [].slice.call(arguments)？

while(i--) {

args[i] = arguments$1[i];

}

var result = original.apply(this, args);

// 因 arrayMethods 是为了作为 Observer 中的 value 的原型或者直接作为属性，所以此处的 this 一般就是指向 Observer 中的 value

// 当然，还需要修改 Observer，使得其中的 value 有一个指向 Observer 自身的属性，__ob__，以此将两者关联起来

var ob = this.__ob__;

// 存放新增的数组元素

var inserted;

// 对几个可能有新增元素的方法单独考虑

switch(method) {

case 'push':

inserted = args;

break;

case 'unshift':

inserted = args;

break;

case 'splice':

// splice 方法第三个参数开始才是新增的元素

inserted =args.slice(2);

break;

}

if(inserted) {

// 对新增元素进行 getter、setter 绑定

ob.observerArray(inserted);

}

// 触发方法

ob.dep.notify();

return result;

});

};

var arrayKeys = Object.getOwnPropertyNames(arrayMethods);

更新 Observer

根据上例代码中的注释，改写 Observer，使得两者关联起来，达到监听数组变化的目的：

var Observer = function Observer(value) {

this.value = value;

this.dep = new Dep();

def(value, '__ob__', this);

// 如果是数组，则遍历所有元素

if(Array.isArray(value)) {

var argument = hasProto ? protoAugment : copyAugment;

argument(value, arrayMethods, arrayKeys);

this.observeArray(value);

} else {

this.walk(value);

}

};

参考资料：

vue早期源码学习系列之二：如何监听一个数组的变化

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。