vue如何实现『数组』的响应式

  • 时间:
  • 浏览:
  • 来源:互联网

上源码,加上自己的理解:

// 拿到数组的原型
const arrayProto = Array.prototype
// 以数组的原型创建一个自己的对象,《创建一个对象作为拦截器》
// 这里暴露出去后会在 别处 <observe> 使用到,用于对数组类型原型的改变,
// 使其在调用push等方法时会经过下面defineProperty中定义的方法,
export const arrayMethods = Object.create(arrayProto) // --------①

// 罗列出需要改变的方法,《改变数组自身内容的7个方法》
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) { 
   // 将数组的原始方法以及其拥有的能力存在这里,《缓存原生方法》
  const original = arrayProto[method];
  
  // 给我们②处的自定义原型方法写如函数,
  // 函数名为`method` 对应的数组名,
  Object.defineProperty(arrayMethods, method, {
    enumerable: false,
    configurable: true,
    writable: true,
    
    // args为调用时传入的参数,
    value:function mutator(...args){
    
    // original为我们上面保存的原生方法,
    // apply(也可以用call),改变 this 指向调用者,传入参数args
      const result = original.apply(this, args);
      
      // 为什么需要return,
      // 因为像splice 这样的数组方法需要有一个操作后的返回值,
      return result
    }
  })
})

在这里插入图片描述

本文链接http://www.dzjqx.cn/news/show-617137.html