Vue监听数组变化源码解析
上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在。
这一篇开始考虑数组的问题。
从最简单的入手
先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象。
遍历数组,而后对数组中的每个对象调用observe方法
//上一篇中出现的未曾重写的代码,这一篇中不再重复 varObserver=functionObserver(value){ this.value=value; this.dep=newDep(); //如果是数组,则遍历所有元素 if(Array.isArray(value)){ this.observeArray(value); }else{ this.walk(value); } }; Observer.prototype.observeArray=functionobserveArray(items){ //遍历数组所有元素,对单个元素进行getter、setter绑定 for(vari=0,l=items.length;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):
functiondef(obj,key,val,enumerable){ Object.defineProperty(obj,key,{ value:val, //转变为boole值,如果不传参,转为false enumerable:!!enumerable, writable:true, configurable:true }); }给对象添加一组方法
给对象添加一组方法,如果所在环境支持proto,就简单了,直接把对象的proto指向这一组方法就好了;如果不支持,则遍历这一组方法,依次添加到对象中,作为隐藏属性(即enumerable:false,不能被in关键字找到):
varhasProto='__proto__'in{}; varaugment=hasProto?protoAugment:copyAugment; functionprotoAugment(target,src){ target.__proto__=src; } functioncopyAugment(target,src,keys){ for(vari=0;i先来一发简单的
vararrayPush={}; (function(method){ varoriginal=Array.prototype[method]; arrayPush[method]=function(){ //this指向可通过下面的测试看出 console.log(this); returnoriginal.apply(this,arguments) }; })('push');vartestPush=[]; 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中,来达到监视其变化的目的。
vararrayProto=Array.prototype; vararrayMethods=Object.create(arrayProto);接着就是遍历需要触发更新的几个方法,依次将其附加到arrayMethods上:
['push','pop','shift','unshift','splice','sort','reverse'].forEach(function(method){ //获取原始的数组操作方法 varoriginal=arrayProto[method]; //在arrayMethods上新建属性method,并为method指定值(函数) //即改写arrayMethods上的同名数组方法 def(arrayMethods,method,functionmutator(){ vararguments$1=arguments; vari=arguments.length; varargs=newArray(i); //将伪数组arguments转变为数组形式 //为何不用[].slice.call(arguments)? while(i--){ args[i]=arguments$1[i]; } varresult=original.apply(this,args); //因arrayMethods是为了作为Observer中的value的原型或者直接作为属性,所以此处的this一般就是指向Observer中的value //当然,还需要修改Observer,使得其中的value有一个指向Observer自身的属性,__ob__,以此将两者关联起来 varob=this.__ob__; //存放新增的数组元素 varinserted; //对几个可能有新增元素的方法单独考虑 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(); returnresult; }); }; vararrayKeys=Object.getOwnPropertyNames(arrayMethods);更新Observer
根据上例代码中的注释,改写Observer,使得两者关联起来,达到监听数组变化的目的:
varObserver=functionObserver(value){ this.value=value; this.dep=newDep(); def(value,'__ob__',this); //如果是数组,则遍历所有元素 if(Array.isArray(value)){ varargument=hasProto?protoAugment:copyAugment; argument(value,arrayMethods,arrayKeys); this.observeArray(value); }else{ this.walk(value); } };参考资料:
vue早期源码学习系列之二:如何监听一个数组的变化以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。