【手把手教你搓Vue响应式原理】(四) 数组的响应式处理

466 阅读2分钟

大家好,我是 辉夜真是太可爱啦 。这是我最近在写的【手把手教你搓Vue响应式原理】系列,本文将一步步地为你解开vue响应式原理的面纱。由于本人也是在写这篇文章的过程中不断试错,不断学习改进的,所以,本文同样很适合和我一样的初学者。和 Vue 的设计理念如出一辙,那就是渐进增强

上文链接

【手把手教你搓Vue响应式原理】(一)初识Vue响应式

【手把手教你搓Vue响应式原理】(二)深度监测对象全部属性

【手把手教你搓Vue响应式原理】(三)observe 以及 ob

前言

之前已经将对象的响应式处理都写完了,并且,新增了 observe 方法作为入口,然后通过 Observer 类在初始化的时候完成遍历当前层的所有属性的同时,添加 __ob__ 属性。

现在这篇文章,主要将对数组进行响应式处理。

数组自有的遍历

首先的一点,就是要先区分数组的遍历,和之前的 walk 遍历对象,有所区分。

我们新增一个 observeArray 专门用来遍历数组。

可能有人会疑问,为什么数组的 observeArray 循环用的是 observe ,而 walk 用的是 defineReactive 。 这是因为数组中的数据可能不是对象,所以要走 observe

function observeArray(list) {
  for(let i=0,l=list.length;i<l;i++){
    observe(list[i])
  }
}

然后在 Observer 构造函数出进行类型判断

class Observer{
  constructor(obj){
    def(obj,'__ob__',this,false)
    if (Array.isArray(obj)){
      observeArray(obj)
    }else{
      this.walk(obj);
    }
  }
  // ...
}

改写数组改变元素的七大方法

数组的 push , pop , shift , unshift , splice , sort , reverse 都能在改变数组的同时,不会触发object.defineProperty 的 set 监听。

所以,我们需要改写它的方法。

思路前瞻

  1. 通过 Object.create() ,以 Array.prototype 为原型创建 arrayMethods 对象
  2. 对 arrayMethods 中的七大方法进行循环
  3. 通过 inserted 变量将 push unshift splice 中的新增项进行保存,对他们进行 observe 响应式
  4. 用 def 对他们进行改写,通过 apply 调用原本的方法,不丧失原本的功能,在这里可以添加自定义的回调,例如添加视图更新
  5. 在 Observer 类的构造函数中,对所有的数组进行Object.setPrototypeOf() 强写,将当前数组对象的原型链强行指向 arrayMethods

当然,如果这个思路前瞻不太看得懂也不要紧,可以跟着下面的实际执行,我们一步步来。

实际执行

先将 Array.prototype 进行拷贝一份,因为这七大方法都存在于原型链上。然后,将数组的原型都赋值到我们创建的新对象 arrayMethods 上。

那我们先创建拷贝一个数组的原型,可以进行打印输出来看一下

// 拷贝一份数组的原型
const arrayPrototype=Array.prototype;
console.log(arrayPrototype)

image.png

可以看到除了我们的七大方法,别的数组方法也全在上面了。

现在,我们以它为原型,创建一个新的对象 arrayMethods,这时候,就需要用到我们的 Object.create

Object.create() 方法主要用来创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

// 以 Array.prototype 为原型创建 arrayMethods 对象
const arrayMethods=Object.create(arrayPrototype);
console.log(arrayMethods);

输出之后可以看到已经成功复制了 Array.prototype 原型。

我们将七个方法名写在一个数组中,

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

用一个 for 循环将 methodsNeedChange 进行遍历,将 arrayMethods 中所有涉及改变数组的方法进行重写:

for(let i=0;i<methodsNeedChange.length;i++){
  // 备份原来的方法
  const original=arrayMethods[methodsNeedChange[i]];
  // 定义新的方法
  def(arrayMethods,methodsNeedChange[i],function () {
    将原本的方法执行
    original.apply(this,arguments)
    // 写监听到之后更新视图
  },false)
}
  • 为什么要用function() ?

    因为比方说 a.b.c.push(),其中的 this 指向肯定要指向 c,毕竟是在c中添加,如果使用箭头函数,那就会以 a 为 this 指向。(关于this指向的问题不清楚的可以查看 一文搞懂JS系列(十)之彻底搞懂this指向

  • 为什么都使用 for 循环

    因为 for循环是循环里面性能最高的。

  • original.apply(this,arguments) 到底什么意义

    直接使用 original() 是不行的,因为没有指定 this 的情况下,最终会指向 window ,导致程序会报错,所以,正确的方法是使用 apply call 或者 bind ,这三个都可以。

那么,现在,这个 arrayMethods 就是成功改写之后的数组方法,我们需要将所有对 Observer 生成的实例的数组方法,都指向我们的 arrayMethods ,而不是指向 Array.prototyppe,这时候就需要用到 Object.setPrototypeOf()

该方法主要用于设置一个指定的对象的原型 ( 即, 内部Prototype属性)到另一个对象或 null 上。

在 Observer 类中的数组判断中,加入 setPrototypeOf

class Observer{
  constructor(obj){
    def(obj,'__ob__',this,false)
    if (Array.isArray(obj)){
      observeArray(obj)
      Object.setPrototypeOf(obj,arrayMethods);
    }else{
      this.walk(obj);
    }
  }
  // ...
}

为了方便测试,我们在 arrayMethods 改写中加入 console.log('dddd');

for(let i=0;i<methodsNeedChange.length;i++){
  // 备份原来的方法
  const original=arrayMethods[methodsNeedChange[i]];
  // 定义新的方法
  def(arrayMethods,methodsNeedChange[i],function () {
    console.log('dddd');
    original.apply(this,arguments)
    // 写监听到之后更新视图
  },false)
}

接下来,我们来测试一下

let a= [1,2,3,4,5]
observe(a);
a.push('abc')

会成功发现,当我们执行 push 的同时,控制台输出了 dddd 。并且,成功将 abc 塞入了 a 数组。

插入的新项也要 observe

现在,我们已经能对数组的七大方法成功进行拦截操作了,但是,因为 push , unshift , splice 比较特殊,是可以对数组插入新的值,对于新的值,我们是不是也要进行 observe 响应式处理。

所以,在定义新的方法的时候,我们要对它执行的方法进行特殊处理。

for(let i=0;i<methodsNeedChange.length;i++){
  // 备份原来的方法
  const original=arrayMethods[methodsNeedChange[i]];
  // 定义新的方法
  def(arrayMethods,methodsNeedChange[i],function () {
    // 用来保存新插入的值
    let inserted=[];
    // 由于 arguments 对象是类数组,所以先通过扩展运算符转为数组之后,再进行操作。
    let args=[...arguments];
    // 先判断 是否是 push unshift splice ,如果是的话,先取出插入的新值,后面进行 observeArray
    switch (methodsNeedChange[i]) {
      case 'push':
      case 'unshift':
        inserted=args;
        break;
      case 'splice':
        // splice(起始下标,删除个数,新添加的元素)
        inserted=args.slice(2);
    }
    // 先判断 inserted 里面有东西,才执行 observeArray
    inserted.length && observeArray(inserted);
    // 将备份的方法进行执行,毕竟不能丢失数组方法原本的功能执行
    original.apply(this,arguments)
    // 写监听到之后更新视图
  },false)
}

所以最终的代码如下:

// 拷贝一份数组的原型
const arrayPrototype=Array.prototype;
// 以 Array.prototype 为原型创建 arrayMethods 对象
const arrayMethods=Object.create(arrayPrototype);

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

for(let i=0;i<methodsNeedChange.length;i++){
  // 备份原来的方法
  const original=arrayMethods[methodsNeedChange[i]];
  // 定义新的方法
  def(arrayMethods,methodsNeedChange[i],function () {
    // 用来保存新插入的值
    let inserted=[];
    // 由于 arguments 对象是类数组,所以先通过扩展运算符转为数组之后,再进行操作。
    let args=[...arguments];
    // 先判断 是否是 push unshift splice ,如果是的话,先取出插入的新值,后面进行 observeArray
    switch (methodsNeedChange[i]) {
      case 'push':
      case 'unshift':
        inserted=args;
        break;
      case ' ':
        // splice(起始下标,删除个数,新添加的元素)
        inserted=args.slice(2);
    }
    // 先判断 inserted 里面有东西,才执行 observeArray
    inserted.length && observeArray(inserted);
    // 将备份的方法进行执行,毕竟不能丢失数组方法原本的功能执行
    original.apply(this,arguments)
    // 写监听到之后更新视图
  },false)
}

function defineReactive(obj,key,val) {
  console.log(key);
  // 判断当前入参个数,两个的话直接返回当前层的对象
  if(arguments.length===2){
    val=obj[key];
    observe(val)
  }
  Object.defineProperty(obj,key,{
    // 可枚举,默认为 false
    enumerable:true,
    // 属性的描述符能够被改变,或者是删除,默认为 false
    configurable:true,
    get(){
      return val;
    },
    set(newValue){
      val=newValue;
      observe(val)
    }
  })
}

function def(obj,key,value,enumerable) {
  Object.defineProperty(obj,key,{
    value,
    //这个属性仅仅保存 Observer 实例,所以不需要遍历
    enumerable
  })
}

// 遍历对象当前层的所有属性,并且绑定 defineReactive
class Observer{
  constructor(obj){
    def(obj,'__ob__',this,false)
    if (Array.isArray(obj)){
      observeArray(obj)
      Object.setPrototypeOf(obj,arrayMethods);
    }else{
      this.walk(obj);
    }
  }
  walk(obj){
    let keys=Object.keys(obj);
    for(let i =0;i<keys.length;i++){
      defineReactive(obj,keys[i])
    }
  }
}

function observe(value) {
  if(typeof value !== 'object') return;
  let ob;
  // eslint-disable-next-line no-prototype-builtins
  if(value.hasOwnProperty('__ob__') && value.__ob__ instanceof Observer){
    ob=value.__ob__;
  }else{
    ob = new Observer(value);
  }
  return ob;
}

function observeArray(list) {
  for(let i=0,l=list.length;i<l;i++){
    observe(list[i])
  }
}

经过测试,三种方法都完全没问题

let a=[1,2,3,4,5]
observe(a)
a.push(6,7,8,9)
console.log(a);   // [1, 2, 3, 4, 5, 6, 7, 8, 9]
let a=[1,2,3,4,5]
observe(a)
a.sfhit(6,7,8,9)
console.log(a);   // [6, 7, 8, 9, 1, 2, 3, 4, 5]
let a=[1,2,3,4,5]
observe(a)
a.splice(2,2,6,7,8,9)
console.log(a);   // [1, 2, 6, 7, 8, 9, 5]

而且执行其他的方法也完全没问题

let a=[1,2,3,4,5]
observe(a)
let b=a.map(x=>x*2)
console.log(b);  // [2, 4, 6, 8, 10]

思路回顾

  1. 通过 Object.create() ,以 Array.prototype 为原型创建 arrayMethods 对象
  2. 对 arrayMethods 中的七大方法进行循环
  3. 通过 inserted 变量将 push unshift splice 中的新增项进行保存,对他们进行 observe 响应式
  4. 用 def 对他们进行改写,通过 apply 调用原本的方法,不丧失原本的功能,在这里可以添加自定义的回调,例如添加视图更新
  5. 在 Observer 类的构造函数中 , 对所有的数组进行Object.setPrototypeOf() 强写,将当前数组对象的原型链强行指向 arrayMethods

文末思考

其实,事情已经到了这里,只要在 setter 中调用一下渲染函数来重新渲染页面,不就能完成在数据变化时更新页面了吗?确实可以,但是这样做的代价就是:任何一个数据的变化,都会导致这个页面的重新渲染,代价未免太大了吧。我们想做的效果是:数据变化时,只更新与这个数据有关的DOM结构,所以,在下一节中,我们会来讲讲 DepWatcher

下文引荐

【手把手教你搓Vue响应式原理】(五) Watcher 与 Dep

文章参考

【尚硅谷】Vue源码解析之数据响应式原理 0年前端的Vue响应式原理学习总结1:基本原理