前言
关于 Vue2 和 Vue3 的数据响应式原理，相信 Vue 技术栈的同学或多或少都了解过，甚至在简历上写很熟悉，而且我们在第一篇中也已经基本实现过了，但大家是否真的彻底掌握了呢？
正如我们前面所说的那样，Vue2、Vue3、SolidJS、Mobx 它们的数据响应式基本原理都是一样的，具体区别只是设计理念和实现方式不一样。按以前读书时代考试做题一样，它们是同一类型的题目，也就是基于依赖收集和触发的运行时的数据响应式，如果说你只会解答其中一道题，其他的题却不会解答，则说明你并没有真正彻底掌握这一类题。
同样地基于依赖追踪和触发的响应式系统都是通过发布订阅模式进行实现的，那么你知道 Vue 的数据响应式原理中是如何运用发布订阅模式的吗？
所以我们在本篇当中将从发布订阅模式的角度来理解 Vue 的数据响应式原理，彻底掌握数据响应式的基本原理，同时也巩固我们在上一篇中所说的发布订阅模式。我们在上一篇中学习了发布订阅模式，我们都是基于一些 demo 的例子去理解，本篇则真正的把发布订阅模式在实际项目的进行运用。
温馨提示，阅读本本之前最好先阅读前一篇文章，对发布订阅模式有一定的理解。
发布订阅模式原理回顾
我们在上一篇中最后是通过 Object.defineProperty 方法对公众号对象 weChatOfficialAccount 的 article 属性进行劫持监听，然后在 getter 的时候进行订阅，在 setter 的时候进行发布。
代码如下：
// 定义公众号
const weChatOfficialAccount = {
// 订阅公众号的人的记录列表
subscribers: [],
// 文章内容
article: '',
// 添加订阅者
addDep(fn) {
// 把订阅者添加进记录列表
this.subscribers.push(fn)
},
// 广播信息
notify(title) {
// 发布信息时就是把记录列表中的订阅者全部通知一次
this.subscribers.forEach(fn => fn(this.article))
},
// 取消订阅
remove(fn) {
// 找到需要删除的订阅者
const index = this.subscribers.indexOf(fn)
// 删除订阅者
this.subscribers.splice(index, 1 )
}
}
defineReactive(weChatOfficialAccount, 'article', weChatOfficialAccount.article)
// 通过闭包把劫持的属性值进行缓存
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
get() {
// 存在订阅者就进行订阅操作
if (subscriber) weChatOfficialAccount.addDep(subscriber)
return val
},
set(newVal) {
val = newVal
// 通知所有的订阅者
weChatOfficialAccount.notify()
}
})
}我们可以看到 weChatOfficialAccount 对象上有很多属于发布订阅模式中的功能，如果说还有其他对象也需要实现这样的功能，那么也要实现一遍这些功能，很明显这样是不可接受的，我们可以通过上一篇中实现的消息代理 来代替 weChatOfficialAccount 对象中的发布订阅模式的功能。
首先我们对消息代理的实现做如下修改：
class Dep {
constructor() {
// 订阅者存储中心
this.subs = []
}
// 添加订阅者
addSub(sub) {
this.subs.push(sub)
}
// 通知订阅者
notify() {
this.subs.forEach(sub => sub())
}
}如果熟悉 Vue2 数据响应式原理的同学对上面的代码肯定很熟悉，这个就是 Vue2 源码中的 Dep 类的简易实现，所以 Vue2 源码中的 Dep 其实就是一个事件总线或者叫消息代理，但它又不仅仅是消息代理，在某些时刻它同时又是一个订阅者，这个情况就是我们在上篇当中所说的一个对象既可以是发布者也可以是订阅者，而在 Vue2 源码中 Dep 类既是消息代理中心又是订阅者，具体情况我们将下文中进行详细讲解。
接下来我们继续做如下修改：
const weChatOfficialAccount = {
// 消息代理对象
__ob__: new Dep(),
// 文章内容
article: '',
}
defineReactive(weChatOfficialAccount, 'article', weChatOfficialAccount.article)
// 通过闭包把劫持的属性值进行缓存
function defineReactive(data, key, val) {
// 获取消息代理对象
const dep = weChatOfficialAccount.__ob__
Object.defineProperty(data, key, {
get() {
// 存在订阅者就进行订阅操作
if (subscriber) dep.addSub(subscriber)
return val
},
set(newVal) {
val = newVal
// 通知所有的订阅者
dep.notify()
}
})
}我们在公众号对象中通过 __ob__ 属性来存储消息代理对象，这样公众号对象原本属于发布订阅的功能就通过 Dep 类来实现了，这样代码的功能职责就梳理得十分清晰了，也符合代码整洁之道。
我们对修改后的代码进行测试：
// 订阅者小明
let subscriber = () => {
console.log(`收到的公众号文章：${weChatOfficialAccount.article}`)
}
// 读取一次，触发 getter 进行订阅
weChatOfficialAccount.article
// 设置为 null 防止重复订阅
subscriber = null
// 公众号发布文章则直接通过给属性赋值的方式
weChatOfficialAccount.article = '通过 Object.defineProperty 方法实现订阅发布模式'上述测试代码的测试结果将会打印：
收到的公众号文章：通过 Object.defineProperty 方法实现订阅发布模式
我们通过 Object.defineProperty 方法实现对 weChatOfficialAccount 对象的属性 article 进行监听实现发布订阅功能，然后订阅的时候需要读取一下，触发 getter 进行订阅，这个行为在上述例子中比较奇怪，我们把它改成我们容易理解的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-9" />
<title></title>
</head>
<body>
<div id='content'></div>
<script>
const weChatOfficialAccount = {
// 消息代理对象
__ob__: new Dep(),
// 文章内容
article: '文章内容',
}
// 省略 ...
// 订阅者小明
let subscriber = () => {
const el = document.getElementById('content')
el.textContent = `小明收到的公众号文章：${weChatOfficialAccount.article}`
}
// 初始化
subscriber()
subscriber = null
</script>
<body>
</html>我们改成我们 web 应用程序中的例子就比较容易理解了。所谓订阅者小明，就是一个 HTML 更新函数，在初始化执行 subscriber() 函数的时候，会读取公众号对象 weChatOfficialAccount 的 article 属性的值，这样就会触发 getter 函数进行订阅，在后续当公众号对象 weChatOfficialAccount 的 article 属性值发生变化的时候，就会触发 setter 进行发布，也就是重新执行订阅者函数，然后网页内容发生变化。这个也是 Vue2 中的数据响应式的基本原理。
在上述例子中我们只对其中一个属性进行监听，但实际情况很有可能有其他订阅者对其他属性的进行引用。
// 订阅者郭靖
let guojingSubscriber = () => {
console.log(`郭靖收到的公众号文章作者：${weChatOfficialAccount.author}`)
}
// 订阅者杨过
let yangguoSubscriber = () => {
console.log(`杨过收到的公众号发布时间：${weChatOfficialAccount.date}`)
}然后我们需要对公众号对象进行修改：
const weChatOfficialAccount = {
// 事件总线对象
__ob__: new Dep(),
// 文章内容
article: '文章内容',
+ author: '作者',
+ date: '日期'
}
defineReactive(weChatOfficialAccount, 'article', weChatOfficialAccount.article)
+ defineReactive(weChatOfficialAccount, 'author', weChatOfficialAccount.author)
+ defineReactive(weChatOfficialAccount, 'date', weChatOfficialAccount.date)同时需要对 getter 中的添加订阅者部分进行修改，为了精准添加对应的订阅者，我们需要判断对应的属性：
function defineReactive(data, key, val) {
// 获取消息代理对象
const dep = weChatOfficialAccount.__ob__
Object.defineProperty(data, key, {
get() {
+ // 为了精准添加对应属性的订阅者，我们需要判断对应的属性
+ if (subscriber && key === 'article') dep.addSub(subscriber)
+ if (guojingSubscriber && key === 'author') dep.addSub(guojingSubscriber)
+ if (yangguoSubscriber && key === 'date') dep.addSub(yangguoSubscriber)
return val
},
set(newVal) {
val = newVal
// 通知所有的订阅者
dep.notify()
}
})
}我们上述代码中为了精准添加对应属性的订阅者，我们需要在 getter 中判断对应的属性，在功能简单的情况下可以，如果功能复杂，对象的属性庞大的情况下，这样肯定是不能接受的。
又因为在触发 getter 的时候，只会是在某个订阅者函数在执行的时候，也就是说在 getter 被触发的时候，这个时候的订阅者是确定的，所以我们可以采用 中间变量 形式来解决这个问题。我们设置一个全局变量 activeEffect，也就是所谓中间变量，然后在初始化执行订阅者函数之前把需要执行的订阅者函数赋值给 activeEffect，然后在 getter 里面就可以把中间变量 activeEffect 通过消息代理对象添加到订阅者记录里面了，然后在执行完该订阅者函数之后则需要把中间变量 activeEffect 设置为 null，防止重复添加。
代码修改如下：
+ // 订阅者中间变量
+ let activeEffect
function defineReactive(data, key, val) {
// 获取消息代理对象
const dep = weChatOfficialAccount.__ob__
Object.defineProperty(data, key, {
get() {
+ // 存在订阅者中间变量就进行订阅者添加
+ if (activeEffect) dep.addSub(activeEffect)
return val
},
set(newVal) {
val = newVal
// 通知所有的订阅者
dep.notify()
}
})
}
+ // 初始化订阅者
+ activeEffect = subscriber
+ subscriber()
+ activeEffect = null
+ activeEffect = guojingSubscriber
+ guojingSubscriber()
+ activeEffect = null
+ activeEffect = yangguoSubscriber
+ yangguoSubscriber()
+ activeEffect = null接着我们进行测试：
// 公众号发布文章
weChatOfficialAccount.article = '通过 Object.defineProperty 方法实现订阅发布模式'打印结果如下：
我们就发现我们虽然只对 article 属性进行赋值，但也触发了其他属性的订阅者的执行。那么我们就需要对属性与订阅者之间进行准确关联。那么如何进行准确关联呢？我们通过第一篇文章可以知道，在通过 Object.defineProperty 对每一个属性进行劫持监听的时候，通过闭包的形式把属性值缓存下来的，所以每一个属性的消息代理也放在闭包函数 defineReactive 中。
// 通过闭包把劫持的属性值进行缓存
function defineReactive(data, key, val) {
+ // 通过闭包把每一个属性的消息代理进行缓存
+ const dep = new Dep()
Object.defineProperty(data, key, {
get() {
// 存在订阅者中间变量就进行订阅者添加
if (activeEffect) dep.addSub(activeEffect)
return val
},
set(newVal) {
val = newVal
// 通知所有的订阅者
dep.notify()
}
})
}这时我们再进行测试的时候，就可以精准触发订阅者了。
我们上面是通过手动调用 defineReactive 函数进行对象的属性劫持的，我们可以通过获取所有对象的属性然后遍历调用 defineReactive 函数进行对象的属性劫持，同时把这个功能封装成一个工具函数 observe。我们在第一篇中也实现过的了，下面我们来重新实现一下：
function observe (data) {
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}这样我们就可以通过 observe 函数来定义一个响应式对象了。
const weChatOfficialAccount = {
// 文章内容
article: '文章内容',
author: '作者',
date: '日期'
}
- defineReactive(weChatOfficialAccount, 'article', weChatOfficialAccount.article)
- defineReactive(weChatOfficialAccount, 'author', weChatOfficialAccount.author)
- defineReactive(weChatOfficialAccount, 'date', weChatOfficialAccount.date)
+ observe(weChatOfficialAccount)至此我们便通过发布订阅模式初步实现了 Vue2 的响应式原理。创建一个对象，通过 observe 工具函数遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter，然后在 getter 的时候进行依赖收集，在 setter 的时候进行依赖触发。
从发布订阅模式的角度来说就是每一个对象的 property 都是发布者，然后它的消息代理则通过闭包的形式跟每一个 property 的值一起缓存在 defineReactive 闭包函数创建独立空间中，它们是多对多的关系。
小结
在我们一般的发布订阅模式（也叫观察者模式）中，发布者或者被观察者是很明确的，是一个具体的对象，但正如我们前一篇文章所说的那样，发布订阅模式是没有标准范式的，设计模式也是，辨别一种模式不能通过代码结构，而是代码意图 。而在我们上述实现的 Vue2 响应式原理的过程中，我们发现其实每一个对象属性（property）都是一个发布者或者叫被观察者，它的发布者功能则通过消息代理中介进行实现，而这个消息代理对象则通过闭包的形式跟每个属性值一起缓存在闭包当中。我们又可以发现所谓发布订阅模式的触发条件也不是唯一的，我们一般的描述定义是，当一个对象发现变化的时候才去触发所有依赖它的订阅者，其实不然，发布订阅模式的触发条件可以是状态的变化、某个操作的变化、甚至是发布订阅者的通知也可以触发另外一个发布者进行发布操作。如果有在 Vue 中使用过事件总线的同学会很清楚，我们在组件中触发通知（emit）订阅者操作的时候并不一定是组件属性发生了变化，而有可能是某个方法触发了通知（emit）订阅者操作。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
// 订阅者中间变量
let activeEffect;
class Dep {
constructor() {
// 订阅者存储中心
this.subs = [];
}
// 添加订阅者
addSub(sub) {
this.subs.push(sub);
}
// 通知订阅者
notify() {
this.subs.forEach((sub) => sub());
}
}
const weChatOfficialAccount = {
// 消息代理对象
__ob__: new Dep(),
// 文章内容
article: "文章内容",
author: "作者",
date: "日期",
};
// 通过闭包把劫持的属性值进行缓存
function defineReactive(data, key, val) {
// 获取消息代理对象
// 通过闭包把每一个属性的消息代理进行缓存
const dep = new Dep();
Object.defineProperty(data, key, {
get() {
// 存在订阅者就进行订阅操作
if (activeEffect) dep.addSub(activeEffect);
return val;
},
set(newVal) {
val = newVal;
// 通知所有的订阅者
dep.notify();
},
});
}
let subscriber = () => {
const el = document.getElementById("content");
el.textContent = `小明收到的公众号文章：${weChatOfficialAccount.article}`;
};
// 订阅者郭靖
let guojingSubscriber = () => {
console.log(`郭靖收到的公众号文章作者：${weChatOfficialAccount.author}`);
};
// 订阅者杨过
let yangguoSubscriber = () => {
console.log(`杨过收到的公众号发布时间：${weChatOfficialAccount.date}`);
};
function observe(data) {
Object.keys(data).forEach((key) => {
defineReactive(data, key, data[key]);
});
}
observe(weChatOfficialAccount);
// 公众号发布文章则直接通过给属性赋值的方式
weChatOfficialAccount.article =
"通过 Object.defineProperty 方法实现订阅发布模式";
// 初始化订阅者
activeEffect = subscriber;
subscriber();
activeEffect = null;
activeEffect = guojingSubscriber;
guojingSubscriber();
activeEffect = null;
activeEffect = yangguoSubscriber;
yangguoSubscriber();
activeEffect = null;
</script>
</html>