Vue.js数据驱动的观察者模式

Vue.js的特点之一是数据与视图的解耦，数据驱动视图，更新数据时视图会自动更新，大大减少开发者对元素的操作。实现此功能使用的设计模式是观察者模式。

观察者模式

观察者模式中有两个角色，被观察者(subject/observable)和观察者(observer)。举个例子，在气象观测站中，气象观测仪器是被观察者，气象观测员是观察者。

观察者模式的逻辑是在被观察者对象中维护一个观察者集合，当被观察者收集到信息时通过观察者的接口通知观察者。

Vue.js的数据驱动

我们主要看下图的data部分

其逻辑是：

1. 将data封装为observable
   给data对象添加getter、setter进行依赖收集与派发更新，并且维护watcher集合
   
2. 数据更新时通知watcher更新页面
   

源码

dep.depend()插入watcher

dep.notify()通知watcher


--未完待续，持续学习--