前两节的内容:
在响应式初步那一篇文章的最后,我们提到过,需要对数组进行特殊的处理,为什么?
如果仍然用我们之前写的 demo 来简单模拟响应式的话,那么对于一个数组 arr,当我们访问这个数组时,同样会触发它身上的 getter 和 setter,但需要注意的是,我们在使用数组时,并不是仅仅有一般的读写操作,更多时候,我们会通过一些常用的数组方法去操作数组,例如:
arr.push(...)
arr.unshift(...)
arr.splice(...)
...
此时我们应该如何做到响应式呢?
Vue 中给出的方法是:对 js 中7个会改变数组的方法进行重写。这七个方法分别是:push, pop, unshift, shift, splice, reverse, sort
。
接下来,在我们的 demo 中简单地实现一下。
首先,需要对之前的 Observer 类进行一些修改,加入对数组类型的处理:
class Observer {
constructor(value) {
this.value = value
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 如果是数组类型数据的话就特殊处理
// 代理原型
...
// 监听数组内容
this.observeArray(value)
} else {
this.walk(value)
}
}
observeArray(arr) {
// 对数组内部的对象类型数据进行监听
arr.forEach((i) => observe(i))
}
...
}
接下来,就是对数组方法进行监听。
基于对原型链的理解,我们知道,当调用 arr 身上的某一方法如 push
时,实际上是顺着原型链找到了 Array.prototype
然后调用了它身上的 push
方法。
那么,如果我们想要在调用 push 时,对其进行拦截,让其执行我们自己定义的方法,一般我们想到的都是重写该方法,但实际上还有另一种方法 — 代理原型。
所谓代理原型,实际上就是在数组对象和其原型 Array.prototype
之间做一层代理,当通过数组对象调用某些特定的方法时,就会触发我们的代理,在不影响原方法执行的情况下,实现响应式。
如下图:
接下来就是实现了:
首先是 Observer 类中
// 定义两个全局变量
const arrayPrototype = Array.prototype // 保存数组的原型
// 增加代理原型 proxyPrototype 且 proxyPrototype.__proto__ === arrayProrotype
const proxyPrototype = Object.create(arrayPrototype)
// Observer 类
class Observer {
constructor(value) {
this.value = value
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 如果是数组类型数据的话就特殊处理
// 代理原型
Object.setPrototypeOf(value, proxyPrototype)
// 监听数组内容
this.observeArray(value)
} else {
this.walk(value)
}
}
observeArray(arr) {
// 对数组内部的对象类型数据进行监听
arr.forEach((i) => observe(i))
}
...
}
接下来对上面的7个方法进行代理:
// 在 array.js 中编写
const reactiveMethods = [
'push',
'pop',
'unshift',
'shift',
'splice',
'reverse',
'sort',
]
reactiveMethods.forEach((method) => {
// 取出原方法
const originalMethod = arrayPrototype[method]
// 在我们的代理原型上定义该方法的响应式版本
Object.defineProperty(proxyPrototype, method, {
value: function reactiveMethod(...args) {
// 首先确保调用不受影响
const result = originalMethod.apply(this, args)
// 派发更新
...
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
现在遇到了一个问题:如何派发更新?
在对象类型数据的处理中,我们是首先在 defineReactive
方法中形成一个 dep 实例的闭包,然后在 setter 中通过 dep.notify()
依次通知相关的 watcher 实例来实现派发更新。这样保证了每一个响应式数据都有其自己的 dep 实例。
而这里,数组中的各项数据的确是拥有其自己的 dep 实例的,但是我们想要的是为数组对象本身准备一个 dep 实例,那么我们应该在哪里定义这一 dep 实例呢?
在前面数据劫持的学习实现中,为了防止对某一数据进行重复劫持,我们在每一个被劫持过的数据身上,都添加了一个属性 __ob__
,并将该数据对应的 Observer 类实例存入了该属性中。
那么,同理,数组对象身上应该也存在这一属性:
由于该属性指向当前数据对应的 Observer 类实例,且两者是一一对应的,所以,此时我们只需要在 Observer 实例身上定义一个 dep 实例,就能够维持我们之前的特性:每一个响应式数据都有其自己的 dep 实例。
那么就需要对 Observer 类进行一些修改:
// Observer 类
class Observer {
constructor(value) {
this.value = value
// 声明该数据对应的 dep 实例
this.dep = new Dep()
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 如果是数组类型数据的话就特殊处理
// 代理原型
Object.setPrototypeOf(value, proxyPrototype)
// 监听数组内容
this.observeArray(value)
} else {
this.walk(value)
}
}
observeArray(arr) {
// 对数组内部的对象类型数据进行监听
arr.forEach((i) => observe(i))
}
...
}
接下来,就可以对我们前面的代码进行补全。同时还有一个小细节需要注意:当使用 push、unshift、splice 这三个方法操作数组时,可能会向数组中增加元素,那么这些增加的元素也需要被劫持一下。
// 在 array.js 中编写
const reactiveMethods = [
'push',
'pop',
'unshift',
'shift',
'splice',
'reverse',
'sort',
]
reactiveMethods.forEach((method) => {
// 取出原方法
const originalMethod = arrayPrototype[method]
// 在我们的代理原型上定义该方法的响应式版本
Object.defineProperty(proxyPrototype, method, {
value: function reactiveMethod(...args) {
// 首先确保调用不受影响
const result = originalMethod.apply(this, args)
// 获取数组对象的 Observer 类实例
const ob = this.__ob__
// 对三种方法特殊处理
let appended = null
switch (method) {
case 'push':
case 'unshift':
appended = args
break;
case 'splice':
// splice 方法中,第三个以及以后的参数是新增的数据
appended = args.slice(2)
}
// 如果有新增的数据,则对这些新增的数据进行劫持
if (appended) ob.observerArray(appended)
// 通过dep实例派发更新
ob.dep.notify()
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
完成了派发更新的逻辑,接下来还需要解决依赖收集的问题。
对于下面的数据:
const obj = {
a: 1,
arr: [
{
b: 2,
c: 3,
},
{
d: 4
}
]
}
由于我们前面为被劫持的数据都添加了 __ob__
属性,所以,被劫持后的数据实际上会变成下面这种形式:
const obj = {
a: 1,
arr: [
{
b: 2,
c: 3,
__ob__: {...} // 数组中对象数据的Observer实例
},
{
d: 4,
__ob__: {...} // 数组中对象数据的Observer实例
},
__ob__: {...} // 数组对象arr的Observer实例(实际上的数组对象结构并不是这样的,这里只是简化的写法)
],
__ob__: {...} // obj对象的Observer实例
}
在前面的数据劫持时,我们在 observer
方法的最后,将新创建或已有的 Observer 类实例返回了出来,并在 defineReactive
方法中,用变量 childOb
接收到了该实例:
// 数据劫持
function defineReactive(data, key, value = data[key]) {
const dep = new Dep()
// 对当前属性的下一层属性进行劫持,并拿到当前数据对应的Observer实例
let childOb = observe(val)
// 对当前属性进行拦截
Object.defineProperty(data, key, {
get: function reactiveGetter() {
// 收集依赖
dep.depend()
return value
},
set: function reactiveSetter(newValue) {
if (newValue === value) return
value = newValue
// 触发依赖,并更新Observer实例
childOb = observe(newValue)
dep.notify()
}
})
}
即,当前的闭包中,我们不仅可以通过变量 dep
拿到该数据对应的 dep 实例,还可以通过 childOb.dep
拿到 dep 实例。
在针对对象类型数据的处理中,我们是通过变量 dep
指向的 dep 实例来进行依赖收集以及派发更新,但是这里对于数组类型的数据,我们是通过 __ob__.dep
或者说 childOb.dep
来进行派发更新。即对于对象类型和数组类型的数据,其会存在两个 dep 实例,一个是在 defineReactive 方法的闭包中,一个则在其对应的 Observer 实例对象身上!
因此,只要能够保证 __ob__.dep
与当前闭包中的变量 dep
这两个 dep 实例中保存的 watcher 相同,就能保证依赖收集以及派发更新不会出现问题。
所以,我们需要对原本的 getter 进行修改:
get: function reactiveGetter() {
// 同时向两个dep实例中收集依赖
// 由于此时的 Dep.target 变量指向某一watcher,所以只需要每次收集依赖时,都同时向两个dep实例中收集依赖,就能保证两个dep实例中保存的watcher相同
dep.depend()
childOb.dep.depend()
return value
},
但是,我们还需要考虑一种特殊情况:在 observer
方法中,对于普通类型的数据,我们不会进行处理,即,普通类型的数据身上并不会有 __ob__
属性!也就是说,普通类型数据的 childOb
可能为空,但是,在 defineReactive
方法的闭包中,变量 dep
仍然存在,且能够收集到该数据的依赖,所以此时我们仅需要向变量 dep
指向的 dep 实例中收集依赖就行了:
get: function reactiveGetter() {
// 收集依赖
dep.depend()
if (childOb) {
childOb.dep.depend()
}
return value
},
这样就完成了依赖的收集。
考虑下面的情况:
当我们仅仅改变数组中一个对象的某一属性的值时,是否会触发更新?
const arr = [
{
a: 1
}
]
// 劫持该数据
observer(arr)
// 劫持后的数据变为如下形式
const arr = [
{
a: 1,
__ob__: {...}
},
__ob__: {...}
]
当某一watcher依赖于该数组时,会执行以下流程:
在 watcher 的构造函数中,会访问该数组,触发其 getter,然后在 getter 中触发依赖收集,从而使得 watcher 被收集到数组 arr
的 __ob__.dep
的依赖数组中,但此时需要注意,arr[0]
这一数据的 __ob__.dep
中并没有收集到这个 watcher。显然,我们的实现对于这种情况是不会触发派发更新的。
但是,在 Vue 的源码中认为,只要依赖了该数组,就等价于依赖了数组中的所有元素,即只要数组中的任意元素更新了,依赖该数组的地方也需要更新,这实际上是合理的。
所以,我们需要在收集依赖时做出一些修改:
function defineReactive(data, key, value = data[key]) {
const dep = new Dep()
// 对当前属性的下一层属性进行劫持,并拿到当前数据对应的Observer实例
let childOb = observe(val)
// 对当前属性进行拦截
Object.defineProperty(data, key, {
get: function reactiveGetter() {
// 收集依赖
dep.depend()
if (childOb) {
childOb.dep.depend()
// 新增
if (Array.isArray(val)) {
dependArray(val)
}
}
return value
},
set: function reactiveSetter(newValue) {
if (newValue === value) return
value = newValue
// 触发依赖,并更新Observer实例
childOb = observe(newValue)
dep.notify()
}
})
}
function dependArray(array) {
for (let e of array) {
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
这已经是第三版的demo了:
首先是两个全局变量
// public.js
// 定义两个全局变量
const arrayPrototype = Array.prototype // 保存数组的原型
// 增加代理原型 proxyPrototype 且 proxyPrototype.__proto__ === arrayProrotype
const proxyPrototype = Object.create(arrayPrototype)
// demo.js
// observer 方法
function observer (value) {
if (!isObject(value)) {
return
}
var ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else {
ob = new Observer(value);
}
return ob
}
// Observer 类
export class Observer {
constructor(value) {
this.value = value
// 声明该数据对应的 dep 实例
this.dep = new Dep()
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 如果是数组类型数据的话就特殊处理
// 代理原型
Object.setPrototypeOf(value, proxyPrototype)
// 监听数组内容
this.observeArray(value)
} else {
this.walk(value)
}
}
// 遍历下一层属性,执行defineReactive
walk (obj) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
observeArray(arr) {
// 对数组内部的对象类型数据进行监听
arr.forEach((i) => observe(i))
}
}
// def 方法,用于为当前正在拦截的数据添加 __ob__ 属性
function def (obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
});
}
// 数据劫持
function defineReactive(data, key, value = data[key]) {
const dep = new Dep()
// 对当前属性的下一层属性进行劫持,并拿到当前数据对应的Observer实例
let childOb = observe(value)
// 对当前属性进行拦截
Object.defineProperty(data, key, {
get: function reactiveGetter() {
// 收集依赖
dep.depend()
if (childOb) {
childOb.dep.depend()
// 新增
if (Array.isArray(value)) {
dependArray(value)
}
}
return value
},
set: function reactiveSetter(newValue) {
if (newValue === value) return
value = newValue
// 触发依赖,并更新Observer实例
childOb = observe(newValue)
dep.notify()
}
})
}
function dependArray(array) {
for (let e of array) {
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
// Dep 类
class Dep {
constructor() {
this.subs = []
}
// 依赖收集
depend() {
if (Dep.target) {
this.addSub(Dep.target)
}
}
// 通知更新
notify() {
const subs = [...this.subs]
subs.forEach((s) => s.update())
}
// 添加订阅
addSub(sub) {
this.subs.push(sub)
}
}
// 全局变量 Dep.target
Dep.target = null
// 用于暂存 Dep.target 指向的栈
const targetStack = []
// 入栈
function pushTarget (_target) {
targetStack.push(Dep.target) // 保存当前 Dep.target
Dep.target = _target
}
// 出栈
function popTarget () {
Dep.target = targetStack.pop()
}
// Watcher 类
class Watcher {
constructor(data, expression, cb) {
this.data = data; // 要实现响应式的对象
this.expression = expression; // 依赖属性的访问路径
this.cb = cb; // 依赖的回调
this.value = this.get() // 访问目标属性以触发getter从而发起依赖收集流程
}
// 访问当前实例依赖的属性,并将全局变量指向自身
get() {
pushTarget(this)
const value = parsePath(this.data, this.expression)
popTarget()
return value
}
// 收到更新通知后,进行更新,并触发依赖回调
update() {
const oldValue = this.value
this.value = parsePath(this.data, this.expression)
this.cb.call(this.data, this.value, oldValue)
}
}
// 工具函数,用于根据指定访问路径,取出某一对象下的指定属性
function parsePath(obj, expression) {
const segments = expression.split('.')
for (let key of segments) {
if (!obj) return
obj = obj[key]
}
return obj
}
// demo.js
// observer 方法
function observer (value) {
if (!isObject(value)) {
return
}
var ob;
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else {
ob = new Observer(value);
}
return ob
}
// Observer 类
export class Observer {
constructor(value) {
this.value = value
// 声明该数据对应的 dep 实例
this.dep = new Dep()
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 如果是数组类型数据的话就特殊处理
// 代理原型
Object.setPrototypeOf(value, proxyPrototype)
// 监听数组内容
this.observeArray(value)
} else {
this.walk(value)
}
}
// 遍历下一层属性,执行defineReactive
walk (obj) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
observeArray(arr) {
// 对数组内部的对象类型数据进行监听
arr.forEach((i) => observe(i))
}
}
// def 方法,用于为当前正在拦截的数据添加 __ob__ 属性
function def (obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writable: true,
configurable: true
});
}
// 数据劫持
function defineReactive(data, key, value = data[key]) {
const dep = new Dep()
// 对当前属性的下一层属性进行劫持,并拿到当前数据对应的Observer实例
let childOb = observe(value)
// 对当前属性进行拦截
Object.defineProperty(data, key, {
get: function reactiveGetter() {
// 收集依赖
dep.depend()
if (childOb) {
childOb.dep.depend()
// 新增
if (Array.isArray(value)) {
dependArray(value)
}
}
return value
},
set: function reactiveSetter(newValue) {
if (newValue === value) return
value = newValue
// 触发依赖,并更新Observer实例
childOb = observe(newValue)
dep.notify()
}
})
}
function dependArray(array) {
for (let e of array) {
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
// Dep 类
class Dep {
constructor() {
this.subs = []
}
// 依赖收集
depend() {
if (Dep.target) {
this.addSub(Dep.target)
}
}
// 通知更新
notify() {
const subs = [...this.subs]
subs.forEach((s) => s.update())
}
// 添加订阅
addSub(sub) {
this.subs.push(sub)
}
}
// 全局变量 Dep.target
Dep.target = null
// 用于暂存 Dep.target 指向的栈
const targetStack = []
// 入栈
function pushTarget (_target) {
targetStack.push(Dep.target) // 保存当前 Dep.target
Dep.target = _target
}
// 出栈
function popTarget () {
Dep.target = targetStack.pop()
}
// Watcher 类
class Watcher {
constructor(data, expression, cb) {
this.data = data; // 要实现响应式的对象
this.expression = expression; // 依赖属性的访问路径
this.cb = cb; // 依赖的回调
this.value = this.get() // 访问目标属性以触发getter从而发起依赖收集流程
}
// 访问当前实例依赖的属性,并将全局变量指向自身
get() {
pushTarget(this)
const value = parsePath(this.data, this.expression)
popTarget()
return value
}
// 收到更新通知后,进行更新,并触发依赖回调
update() {
const oldValue = this.value
this.value = parsePath(this.data, this.expression)
this.cb.call(this.data, this.value, oldValue)
}
}
// 工具函数,用于根据指定访问路径,取出某一对象下的指定属性
function parsePath(obj, expression) {
const segments = expression.split('.')
for (let key of segments) {
if (!obj) return
obj = obj[key]
}
return obj
}
// array.js
const reactiveMethods = [
'push',
'pop',
'unshift',
'shift',
'splice',
'reverse',
'sort',
]
// 代理原型
reactiveMethods.forEach((method) => {
// 取出原方法
const originalMethod = arrayPrototype[method]
// 在我们的代理原型上定义该方法的响应式版本
Object.defineProperty(proxyPrototype, method, {
value: function reactiveMethod(...args) {
// 首先确保调用不受影响
const result = originalMethod.apply(this, args)
// 获取数组对象的 Observer 类实例
const ob = this.__ob__
// 对三种方法特殊处理
let appended = null
switch (method) {
case 'push':
case 'unshift':
appended = args
break;
case 'splice':
// splice 方法中,第三个以及以后的参数是新增的数据
appended = args.slice(2)
}
// 如果有新增的数据,则对这些新增的数据进行劫持
if (appended) ob.observerArray(appended)
// 通过dep实例派发更新
ob.dep.notify()
return result
},
enumerable: false,
writable: true,
configurable: true
})
})
github 仓库地址:Vue 响应式原理demo