仿写Vue八、添加数组的方法

最新推荐文章于 2026-03-23 16:44:14 发布

原创最新推荐文章于 2026-03-23 16:44:14 发布 · 569 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使数组方法响应式的技术，通过重写数组的七个关键方法，如push、pop等，确保在操作数组时能保持数据的响应式状态。文章详细解释了获取数组原型对象的过程，以及如何通过覆盖方法实现对新增数据项的响应式处理。

八、添加数组的方法

“ 自己动手实践，就会更加深刻的理解**”**

这次处理数组的七个方法，使其成为响应式。

01、获取数组原型对象

重写每一个函数不现实，所以打算先获取数组的原型对象，然后生成一个新的对象来继承此原型对象，这个新的对象就拥有数组的一切属性方法，且不会对原生的数组产生任何影响。

/** 
* 对与响应式数组，我们需要重写其一些方法，例如 push、pop 
* 保证响应式数组使用这些方法之后依然是响应式的。 
*/
const arrProto = Array.prototype;
const arrMethods = Object.create(arrProto);

02、重写方法

我们需要覆盖七个方法：

const methodsToPatch = [  'push',  'pop',  'shift',  'unshift',  'sort',  'reverse',  'splice',]

    对于 **push, pop, splice**，响应式数组唯一不同的地方在于，对于往数组新加的数据项，需要保证其仍然是响应式的。其他的方法，要么是更改数据的位置，要么是删除某些数据，都不需要额外的处理，只需调用原来的方法即可。

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    configurable: true,
    writable: true,
  })
}

methodsToPatch.forEach(method => {
  const original = arrMethods[method];
  def(arrMethods, method, function mutate() {
    console.log('调用的方法是：', method);
    
    let args = [], len = arguments.length;
    while (len--) args[len] = arguments[len];
    const result = original.apply(this, args);
    let inserted;
    const ob = this.__ob__;
    switch(method) {
      case 'push':
      case 'unshift':
        inserted = args; break;
      case 'splice':
        inserted = args.slice(2); break;
    }
    // 如果有新增的数据，则每个数据都将其响应式化
    if (inserted) {
      ob.observeArray(inserted);
    }
    return result;
  })
})

03、效果图

数据初始化：

    const data = {
      name: 'romeo',
      message: 'wants to be rich',
      deep: {
        firstLevel: {
          secondLevel: 'here!'
        }
      },
      arr: [
        { name: 'jack1' },
        { name: 'jack2' },
        { name: 'jack3' },
      ]
    }