vue2.x数组劫持原理的实现

// arrayMethods.__proto__ = oldArrayMethods
export const arrayMethods = Object.create(oldArrayMethods);

const methods = [
'push',
'shift',
'unshift',
'pop',
'sort',
'splice',
'reverse'
]methods.forEach(method=>{
arrayMethods[method] = function (...args) {
const result = oldArrayMethods[method].apply(this,args); // 调用原生的数组方法
// push unshift 添加的元素可能还是一个对象
let inserted; // 当前用户插入的元素
let ob = this.__ob__;
switch (method) {
case 'push':
case 'unshift':
inserted = args;
break;
case 'splice': // 3个 新增的属性 splice 有删除 新增的的功能 arr.splice(0,1,{name:1})
inserted = args.slice(2)
default:
break;
}
if(inserted) ob.observerArray(inserted); // 将新增属性继续观测

return result;
}
})

工具方法定义如下：

/**
 *
 * @param {*} data 当前数据是不是对象
 */
export function isObject(data) {
  return typeof data === 'object' && data !== null;
}
export function def(data,key,value){
  Object.defineProperty(data,key,{
    enumerable:false,
    configurable:false,
    value
  })
}

到此这篇关于vue2.x数组劫持原理的实现的文章就介绍到这了,更多相关vue2.x 数组劫持内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！