浅谈Vue数据响应思路之数组
之前梳理Vue数据响应思路时没有考虑数组的情况。
js中数组有很多实例方法，其中有一部分会改变数组本身的值，比如pushpopshiftunshift等，这些方法被称为变异方法，这些变异方法也是Vue开发中常用的数组操作方法。那么要实现对数组的观测，首先要考虑的就是如何截获这些变异方法的调用。
简单来说，Vue是通过保持这些数组变异方法原有功能不变的前提下，对其功能进行扩展来实现拦截的。具体怎么操作，可以先看一下例子：
functionadd10(num){
returnnum+10
}
console.log(add10(5))//15
constoriginalAdd10=add10
add10=function(num){
console.log('截获了add10操作')
returnoriginalAdd10(num)
}
console.log(add10(5))//'截获了add10操作'
//15
该例中，首先使用变量originalAdd10缓存add10函数，再重新定义add10函数，在重新定义的函数体里就可以执行额外增加的功能，比如上例中的console.log('截获了add10操作')，然后执行缓存的add10函数即originalAdd10，并将结果返回，原理大抵如此。
那么，具体可实现如下：
constmutationMethods=[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
constarrayMethods=Object.create(Array.prototype)
constarrayProto=Array.prototype
mutationMethods.forEach(method=>{
arrayMethods[method]=function(...args){
constresult=arrayProto[method].apply(this,args)
console.log(`我截获了对数组的${method}操作`)
returnresult
}
})
constarr=['kobe','jordan']
arr.__proto__=arrayMethods
arr.push('harden')//'我截获了对数组的push操作'
console.log(JSON.stringify(arr))//'["kobe","jordan","harden"]'
以上，mutationMethods是所有要拦截的数组变异方法的集合。
整体思路就是通过设置数组对象的__proto__属性的值为一个新对象arrayMethods，以代理数组mutationMethods中的变异方法，并将arrayMethods的原型设置为数组构造函数本来的原型，这样方能保证除却代理的方法以外，不影响数组本身的其它方法和属性。
其中：
constarrayMethods=Object.create(Array.prototype)
以上实现了arrayMethods的原型是数组构造函数本来的原型，即arrayMethods.__proto__===Array.prototype。
紧接着：
constarrayProto=Array.prototype
这句使用arrayProto变量缓存了Array.prototype。
再然后：
mutationMethods.forEach(method=>{
arrayMethods[method]=function(...args){
constresult=arrayProto[method].apply(this,args)
console.log(`我截获了对数组的${method}操作`)
returnresult
}
})
将mutationMethods进行循环，在arrayMethods对象上以mutationMethods中各元素为key，即方法名，定义作为拦截器的同名变异方法。
具体：
constresult=arrayProto[method].apply(this,args)
执行缓存的Array.prototype，即arrayProto中对应的变异方法，并传入this以及args，也就是将来调用该方法的数组对象，和调用该方法时传入的参数（或参数列表）转化成的参数数组，并将结果给到变量result。
这里使用了解构赋值的方式将参数（或参数列表）转化成了参数数组，这么做是因为不能确定参数的个数，所以只能使用apply（不能用call），并传入参数数组。
之后：
console.log(`我截获了对数组的${method}操作`)
也就是拦截之后要额外执行的操作了。
最后：
returnresult
将数组原变异方法执行的结果返回，保证原有功能不受影响。
forEach执行完之后：
constarr=['kobe','jordan'] arr.__proto__=arrayMethods
声明并初始化arr，并将arr的__proto__指向arrayMethods，这样便代理了mutationMethods中的变异方法。
最终：
arr.push('harden')//'我截获了对数组的push操作'
console.log(JSON.stringify(arr))//'["kobe","jordan","harden"]'
数组对象手动扩展的功能以及原功能均正常，实现了数组变异方法的拦截。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。