阅读 253

vue2.x响应式原理-数组篇

来不及解释了,快上车......

之前的一篇文章 vue2.x响应式原理主要是对象的响应式,今天补充一下数组响应式的原理,因为vue对数组做了特别的处理。

vue 为什么没像处理对象一样用 Object.defineProperty 处理数组?是 Object.defineProperty 无法监测数组吗?又或者是出于其它方面的什么考虑呢?那它是怎么实现对数组的监听的?带着这些问题我们去一探究竟...

Object.defineProperty 支持数组吗

首先我们来做一个测试,看 Object.defineProperty 是否支持数组。

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true, // 属性可枚举
        configurable: true,
        get() {
            console.log('🐯-----读取', val)
            return val;
        },
        set(newVal) {
            if (val === newVal) return
            val = newVal
            console.log('🐯-----改变---', val, obj)
        }
    })
}

复制代码

还是这个 defineReactive 函数,我们通过它来遍历数组,用数组的索引作为 key,来给每一项打上getter/setter。

let array = [1,2,3,4,5]

array.forEach((c,index) => {
    defineReactive(array, index, c)
})

复制代码

log1.png

我们在控制台打印一下,可以看到打印的结果,这说明数组项被打上了 getter/setter,还回到这个问题,Object.defineProperty 可以做到对数组的监听,它是支持数组的。

vue为什么没有提供对数组属性的监听呢

第二个为题就来了,既然 Object.defineProperty 有这个能力,那么 vue 为什么没用它来实现对数组属性的监听呢

有人提到 length 属性,length 属性的改变可能会导致一些空元素,的确,Object.defineProperty 不能处理这些为空的数组。但是我们换个角度想一下,通过改变 length 属性去增加数组长度,不就是相当于增加属性吗,这个在对象里面 vue 也是无法监测到的。

在上图第二个 log 里面,当给数组某一项赋值的时候,触发了 setter,setter 的时候,打印 obj 数组又依次读取了数组的值,这会影响性能。另外很多时候数组长度我们并不确定,无法提前打上 getter/setter,而且如果数组长度很大也会造成性能问题,用尤大的原话说就是性能代价和获得的用户体验收益不成正比。

贴一个尤大在github上的回答。

you.png

另外贺师俊老湿的回答也非常精辟🙈 :如果你知道数组的长度,理论上是可以预先给所有的索引设置 getter/setter 的。但是一来很多场景下你不知道数组的长度,二来,如果是很大的数组,预先加 getter/setter 性能负担较大。

总而言之就是理论上 vue 是可以这样做,但是出于性能考虑没这样做,而是用了一种数组变异办法来触发视图更新。

vue如何实现对数组的监听

解决了上面的两个问题,我们接下来就来看看 vue 的数组变异具体是怎么实现的。

const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

if (Array.isArray(value)) {
  const augment = hasProto
    ? protoAugment
    : copyAugment
  augment(value, arrayMethods, arrayKeys)
  this.observeArray(value)
} else {
  this.walk(value)
}
复制代码

observeArray 会把数组里面的对象数据变成是可侦测的响应式数据,observeArray 和 walk 函数主要还是我们上篇文章vue2.x响应式原理的内容。vue在这里对数组进行了特别处理,就是依靠着 protoAugment、copyAugment 这两个函数。

export const hasProto = '__proto__' in {}

复制代码

首先通过 hasProto 判断浏览器是否支持 proto 属性,来决定是执行 protoAugment 还是 copyAugment。再看这两个函数之前,我们先来看一下数组变异的核心文件 array.js,顺便也能知道 arrayMethods, arrayKeys 这两个参数是什么。

// array.js

import { def } from '../util/index'

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
 */
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    // 调用数组真正的方法
    const result = original.apply(this, args)
    // __ob__代表数据是否被observe了
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // inserted表示有数据插入 对新数据进行observe
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})
复制代码
/**
 * Define a property.
 */
export function def (obj: Object, key: string, val:any,enumerable?:boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}
复制代码

vue 通过 Object.create让arrayMethods 继承了数组的原型,Object.create 本质是原型式继承【手撕JS继承】,此时数组的原型挂到了arrayMethods 的原型链上。

def函数主要来定义属性。遍历这七种方法,通过 def 函数,我们重写了 arrayMethods 原型链上的这七种方法,并在内部调用了数组的原始方法,最后通过 notify 更新视图。inserted 代表新数据插入,需要对新数据进行 obsserve。

下面我们再回头来看 protoAugment 和 copyAugment 这两个函数。

/**
 * Augment an target Object or Array by intercepting
 * the prototype chain using __proto__
 */
function protoAugment (target, src: Object, keys: any) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}

/**
 * Augment an target Object or Array by defining
 * hidden properties.
 */
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}
复制代码

protoAugment 让数组的原型链指向了 arrayMethods。 当浏览器不支持 __proto__ 时候,遍历 arrayKeys,通过 def 函数,我们手动把 arrayMethods 上的方法挂载到目标数据上,相当于是个 polyfill。唯一的区别是 protoAugment 是把 arrayMethods 挂到了目标的原型链上,而 copyAugment 则是直接把 arrayMethods 的方法定义到了目标的属性上。

小结

vue 出于性能的考虑,没有用 Object.defineProperty 去监听数组,而是通过覆盖数组的原型的方法,对常用的七种方法进行了变异,以此来实现对数组的监听。

源码地址

文章分类
前端
文章标签