来不及解释了,快上车 ……
之前的一篇文章 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)
})
咱们在控制台打印一下,能够看到打印的后果,这阐明数组项被打上了 getter/setter,还回到这个问题,Object.defineProperty 能够做到对数组的监听,它是反对数组的。
vue 为什么没有提供对数组属性的监听呢
第二个为题就来了,既然 Object.defineProperty 有这个能力,那么 vue 为什么没用它来实现对数组属性的监听呢
有人提到 length 属性,length 属性的扭转可能会导致一些空元素,确实,Object.defineProperty 不能解决这些为空的数组。然而咱们换个角度想一下,通过扭转 length 属性去减少数组长度,不就是相当于减少属性吗,这个在对象外面 vue 也是无奈监测到的。
在上图第二个 log 外面,当给数组某一项赋值的时候,触发了 setter,setter 的时候,数据更新又会调用一遍 getter 函数,这会影响性能。另外很多时候数组长度咱们并不确定,无奈提前打上 getter/setter,而且如果数组长度很大也会造成性能问题,用尤大的原话说就是性能代价和取得的用户体验收益不成正比。
贴一个尤大在 github 上的答复。
另外贺师俊老湿的答复也十分精辟🙈
:如果你晓得数组的长度,实践上是能够事后给所有的索引设置 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 去监听数组,而是通过笼罩数组的原型的办法,对罕用的七种办法进行了变异,以此来实现对数组的监听。
源码地址