vue源码解读之双向数据绑定

模式概念（发布-订阅模式）

   发布-订阅模式又称为观察者模式，它定义的是一种一对多的依赖关系，当一个状态发生改变的时候，所有以来这个状态的对象都会得到通知。

生活中的发布-订阅模式
上面事发布-订阅模式的一个比较正式的解释，可能这个解释不大好理解。所以我们通过实际生活中的例子来理解。

比如看中了一套房子，等到去了售楼处的说以后才被告知房子已经售罄了。但是售楼小姐告知，将来会有尾盘推出。具体什么时候推出，目前没人知道。

但是买家又不想频繁的跑，于是就把自己的电话号码登记在售楼处，在登记的花名册上有很多类似的买家。售楼小姐答应买家，新的房源一出来就一一通知买家。

所以上面就是一个发布订阅模式的简单例子。购房者（订阅者）订阅房源信息，售楼处（发布者）发布新房源消息给购房者（订阅者），购房者（订阅者）接收到消息后作出相应的反应。

图解（发布-订阅模式）

上图说道了Observer、Compile和Watcher的概念，以下分别解释：

Observer 这是一个发布者，如上所说的卖房子的人，就是说，举个栗子，当输入框中的值发生改变时，总要有人知道这个框的东西改变了，那我就放个机器在这里等，只要一有‘’动静‘’，马上就出去大喊，“值变啦”，“值变啦”；总而言之，这是一个大喇叭，起到检测作用。

Compile 英文翻译是 “编制、编译”，那么他的作用也就是编译的意思，普通的html中，浏览器识别的也就那些属性和标签，我们凭空加一个v-model，浏览器也会一脸懵逼，不知道干嘛 ^- Compile就是找到浏览器中的这些我们需要使用的但浏览器又不认识的属性来进行相应的设置，让他知道我们要干嘛。本章我们就用 v-model

Watcher 这里就是订阅者，如上所说的买房子的人。它的作用就是观察，观察这个 大喇叭（Observer）什么时候来喊，只要一喊，我这边所观察的对象就要做相应的改变，抗战片中，很多埋伏的战士，都在等待号角，他们的任务就是杀敌人。号角就是我们的Observer 敌人就是我们要改变的数据 。

双向数据绑定概念

所谓的vue双向数据绑定，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,顾名思义，get即当我们获取对象某个属性值时，比如

let demo={a:1}; console.log(demo.a);

这段操作就是get操作，而set操作更简单，比如：

let demo={a:1};demo.a=2;

这个操作就是set操作，而vue所做的就是对data对象进行forEach遍历，然后数据劫持，所谓的劫持，就是在set的时候进行一些添油加醋，再结合我们上面的发布-订阅者模式，就是你set一些，就要告诉我你set了，然后我再去进行我的操作。当你知道其实双向数据绑定就是通过Object.defineProperty来实现的时候，不要惊讶，下一节，我们就手把手教你写一个双向数据绑定的demo。如下图（第一次玩，不会截gif图，请见谅）：