Vue2数据响应式原理深度解析（四）

前言

大家好，欢迎来到今天的学习，本篇文章是本系列的最后一个内容。在上一篇文章当中我们实现了关于数组相关的绑定响应式操作，今天我们来聊聊关于订阅发布的内容

目标

利用模块式编程，通过多个文件之间相互调用，文件内部的函数等方法嵌套循环使用来实现订阅发布

概念

那究竟什么是发布订阅呢？其实对于有关的概念我们不用记得太死板，这样反而不好理解。举个例子，比如有五个人去商店买可乐，但可乐已经卖完了，老板说把你们的联系方式留在这里，有货了给你们打电话。这就是一个对于订阅发布的一个粗浅理解，五个人把电话留给老板是订阅的过程，一有消息老板马上通知五个人是发布的过程，来看下面这张图

这就是vue2发布订阅的一个大致结构和流程，这里稍微理解一下，当我们的依赖，也就是某些依赖数据的地方，当它们在查找一个值时，例如obj.a.b.c,当我要确定这个值时 ，一定会先触发getter函数，在getter函数内部我们就会把构造函数Watcher的实例存入构造函数Dep的实例dep身上的一个数组里，先存起来，如果后面很多地方都会查询这个值，那这个数组肯定会有源源不断的元素进来，而当我改变了这个c的值，那么我就会触发setter函数，那这个函数内部就会遍历那个数组，并执行里面的相关函数，来让所有用到c的地方全部更改，可谓牵一发而动全身，这也是发布订阅的核心思想

实现步骤

实现发布订阅的两个核心函数 ： Watcher 和 Dep

创建Dep.js文件

首先我们需要在数据被添加响应式之前，我们需要给构造函数Observer的实例身上的__ob__添加一个dep属性，如图

此时我们还不能打印这个实例身上是否有dep属性，因为Dep构造函数还未创建，因此我们可以创建一个Dep.js文件，并向外暴露这个Dep构造函数

接着我们要向外暴露Dep类，在暴露之时我们需要初步做一些事情，如下

var uid = 0;
export default class Dep {constructor() {console.log('我是DEP类的构造器');this.id = uid++;// 用数组存储自己的订阅者。subs是英语subscribes订阅者的意思。// 这个数组里面放的是Watcher的实例this.subs = [];}
}; 

可以看到我们在最上面声明一个变