vue的发布订阅是什么？

其实不难理解，只是需要搞清楚在vue中，接下来的5个问题就OK。 1 谁是被观察者，2谁是观察者，3观察者用来做什么的，4观察者与被观察者又是通过怎么样的方法建立起关系的，5被观察者在什么情况下，会让观察者有所举动。

1 什么是发布订阅模式？

其实这几行代码就实现了简单发布订阅，Dep构造函数，他的实例上拥有subs属性和id，id不用解释。 subs用来存放watcher的，同时dep实例上还有一个notify方法，该方法执行，就会让所有的watcher执行他自己的update方法。

换个通俗一点的解释，比如我有个微信公众号，那么假如有10个朋友关注了我，后面某一天我发了文章，我告诉了所有订阅我的朋友，让他们去回复个1，回复后给他们发红包。这就是发布订阅嘛，有订阅者，被订阅改变后的通知订阅者。

new个实例来演示上述代码吧

代码运行结果如下

也，不难理解吧，就不多啰嗦了

2 发布订阅模式的使用

先不上代码，要先理清一下这个发布订阅模式怎么使用。上面的代码理解了之后，我再来理一下他们之间的关系。

1 dep是什么？ dep是一个new出来实例，这个实例可以存放watcher。
2 watcher是什么？ watcher就是一个对象吧，这个对象上拥有一个update方法。
3 watcher是观察者没错，那谁是被观察者？答，上个例子中其实没有被观察者，因为dep只是一个用来存放watcher的实例，只有当一个对象和dep绑定了关系后，那么这个对象才是被观察者。是这个道理吧，因为假如有一个对象 { num： 9} ，我们想做的是，当对象中的num数值发生变化时候，就做一些操作，所以我们需要一个中间介质来存放所有的观察者，如下

{ num：9， dep: { subs: [watcher1, watcher2, ...], notify: ()={...} } }
4 如何响应？因为一些场景，我们改变了对象的num的值情况的话，再去触发这个对象的dep属性上的notify方法，就可以做到这个对象的所有观察者给予响应。

3 vue 中是如何使用的？

答： vue是数据驱动的，实例中的data属性，上边挂在了很多数据，如本例子中name， age等，他们分别都是被观察者，name拥有一个自己的dep，age也拥有一个dep，两个他们是不同的实例。也就是说，当age的值改变后，就会让age拥有的dep上的所有watcher触发update，想必大家肯定知道这个update方法内部要做什么了吧，没错，就是更新视图。