浅谈Vue数据响应思路之数组
之前梳理Vue数据响应思路 时没有考虑数组的情况。
js 中数组有很多实例方法，其中有一部分会改变数组本身的值，比如 push pop shift unshift 等，这些方法被称为变异方法，这些变异方法也是 Vue 开发中常用的数组操作方法。那么要实现对数组的观测，首先要考虑的就是如何截获这些变异方法的调用。
简单来说，Vue 是通过保持这些数组变异方法原有功能不变的前提下，对其功能进行扩展来实现拦截的。具体怎么操作，可以先看一下例子：
function add10(num) {
return num + 10
}
console.log(add10(5)) // 15
const originalAdd10 = add10
add10 = function(num) {
console.log('截获了add10操作')
return originalAdd10(num)
}
console.log(add10(5)) // '截获了add10操作'
// 15
该例中，首先使用变量 originalAdd10 缓存 add10 函数，再重新定义 add10 函数，在重新定义的函数体里就可以执行额外增加的功能，比如上例中的 console.log('截获了add10操作')，然后执行缓存的 add10 函数即 originalAdd10，并将结果返回，原理大抵如此。
那么，具体可实现如下：
const mutationMethods = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
const arrayMethods = Object.create(Array.prototype)
const arrayProto = Array.prototype
mutationMethods.forEach(method => {
arrayMethods[method] = function (...args) {
const result = arrayProto[method].apply(this, args)
console.log(`我截获了对数组的${method}操作`)
return result
}
})
const arr = ['kobe', 'jordan']
arr.__proto__ = arrayMethods
arr.push('harden') // '我截获了对数组的push操作'
console.log(JSON.stringify(arr)) // '["kobe","jordan","harden"]'
以上，mutationMethods 是所有要拦截的数组变异方法的集合。
整体思路就是通过设置数组对象的 __proto__ 属性的值为一个新对象 arrayMethods，以代理数组 mutationMethods 中的变异方法，并将 arrayMethods 的原型设置为数组构造函数本来的原型，这样方能保证除却代理的方法以外，不影响数组本身的其它方法和属性。
其中：
const arrayMethods = Object.create(Array.prototype)
以上实现了 arrayMethods 的原型是数组构造函数本来的原型，即 arrayMethods.__proto__ === Array.prototype。
紧接着：
const arrayProto = Array.prototype
这句使用 arrayProto 变量缓存了 Array.prototype。
再然后：
mutationMethods.forEach(method => {
arrayMethods[method] = function (...args) {
const result = arrayProto[method].apply(this, args)
console.log(`我截获了对数组的${method}操作`)
return result
}
})
将 mutationMethods 进行循环，在 arrayMethods 对象上以 mutationMethods 中各元素为 key，即方法名，定义作为拦截器的同名变异方法。
具体：
const result = arrayProto[method].apply(this, args)
执行缓存的 Array.prototype，即 arrayProto 中对应的变异方法，并传入 this 以及 args，也就是将来调用该方法的数组对象，和调用该方法时传入的参数（或参数列表）转化成的参数数组，并将结果给到变量 result。
这里使用了解构赋值的方式将参数（或参数列表）转化成了参数数组，这么做是因为不能确定参数的个数，所以只能使用 apply（不能用 call），并传入参数数组。
之后：
console.log(`我截获了对数组的${method}操作`)
也就是拦截之后要额外执行的操作了。
最后：
return result
将数组原变异方法执行的结果返回，保证原有功能不受影响。
forEach 执行完之后：
const arr = ['kobe', 'jordan'] arr.__proto__ = arrayMethods
声明并初始化 arr，并将 arr 的 __proto__ 指向 arrayMethods，这样便代理了 mutationMethods 中的变异方法。
最终：
arr.push('harden') // '我截获了对数组的push操作'
console.log(JSON.stringify(arr)) // '["kobe","jordan","harden"]'
数组对象手动扩展的功能以及原功能均正常，实现了数组变异方法的拦截。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
这篇文章主要介绍了VUE的tab页面切换的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(上)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了浅析vue中的组件传值，文章基于vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
element-ui+vue-treeselect下拉框的校验过程
这篇文章主要介绍了element-ui+vue-treeselect下拉框的校验过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家介绍了前端vue3架构setup使用教程，详细介绍 setup 的用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下2023-01-01
最新评论