一个基于ES6 的Mvvm Demo

很多次面试都被问到双向绑定的原理，从一开始的啥都不知道到后来知道使用Object.defineProperty 劫持属性，使用发布订阅进行消息传递，再后来看了很多篇相关的文章和代码，依然应付不了面试官的追问。还是对其中的原理和实现了解的不透彻，所以最终决定自己亲手写一个。网上写mvvm 的博客有很多，都挺详细的也都贴了大段的代码，想了解的可以直接走下面的传送门，这篇文章的代码实现很大一部分都是参考了以下两个链接：

剖析Vue原理&实现双向绑定MVVM

https://github.com/DMQ/mvvm

为了防止内容同质化，这篇文章就讲讲跟这两篇文章中不一样的地方（具体表现就是没有大量代码）。一方面是将ES5 实现转换成了ES6；另一方面，更多的还是讲我在实现这个mvvm demo 中遇到的一些问题和困惑，以及在动手开始写代码之前应该如何从整体上来看待mvvm，就算是以上两篇文章的补充吧。

1. 观察者模式与发布订阅

（1）先看概念

观察者模式与发布订阅是两个很相似的概念，所以经常也会被一起提及，这两个概念确实差别很小，主要差别就在于调度中心。发布订阅是有调度中心（松耦合）的，而观察者模式是没有调度中心的，详细讲解可以参考这篇文章：

https://juejin.im/post/5a14e9edf265da4312808d86

（2）举个例子

Mvvm 中使用的是发布订阅，所以我们就来详细看一下这个模式是如何工作的。为了通俗易懂，先来讲个例子吧。

小明放暑假了，天天在家里做作业。有一天，家里要来客人，客人说是上午过来，但不一定几点来。吃过早饭，小明爸爸说：“我去上班了，如果客人来了，你给我打电话，我回来陪客人喝茶”。小明妈妈说：“我去打麻将了，如果客人来，你给我发微信，我去菜市场买菜回来做饭”。小明默默地把这一切记在了心上，等爸妈走后就在家里看电视直到客人来了然后通知他们。

在这个例子中的几个角色分别对应了发布订阅模式中的几个概念。首先，对于小明父母来说，他们是两个订阅