vue源码观察者模式（观察者模式和发布订阅）
本文目录一览：
- 1、什么是观察者模式`?
- 2、vue双向数据绑定是用了观察者模式还是订阅发布模式
- 3、vuejs源码用了什么设计模式，具体点的
- 4、观察者模式是什么
- 5、vue的数据双向绑定是怎么实现的
- 6、观察者模式的基本简介
什么是观察者模式`?
观察者（Observer）模式又名发布-订阅（Publish/Subscribe）模式。GOF给观察者模式如下定义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
在这里先讲一下面向对象设计的一个重要原则——单一职责原则。因此系统的每个对象应该将重点放在问题域中的离散抽象上。因此理想的情况下，一个对象只做一件事情。这样在开发中也就带来了诸多的好处：提供了重用性和维护性，也是进行重构的良好的基础。
因此几乎所有的设计模式都是基于这个基本的设计原则来的。观察者模式的起源我觉得应该是在GUI和业务数据的处理上，因为现在绝大多数讲解观察者模式的例子都是这一题材。但是观察者模式的应用决不仅限于此一方面。
下面我们就来看看观察者模式的组成部分。
1) 抽象目标角色（Subject）：目标角色知道它的观察者，可以有任意多个观察者观察同一个目标。并且提供注册和删除观察者对象的接口。目标角色往往由抽象类或者接口来实现。
2) 抽象观察者角色（Observer）：为那些在目标发生改变时需要获得通知的对象定义一个更新接口。抽象观察者角色主要由抽象类或者接口来实现。
3) 具体目标角色（Concrete Subject）：将有关状态存入各个Concrete Observer对象。当它的状态发生改变时, 向它的各个观察者发出通知。
4) 具体观察者角色（Concrete Observer）：存储有关状态，这些状态应与目标的状态保持一致。实现Observer的更新接口以使自身状态与目标的状态保持一致。在本角色内也可以维护一个指向Concrete Subject对象的引用。
vue双向数据绑定是用了观察者模式还是订阅发布模式
m(model)v(view)vm(view-model),重要特性双向绑定,m和v之间无耦合,通过操作m,利用vm提供的机制,自动实现v的更新。用过vue应该会有较深体会。
和其相对比比较容易误解是mvc,m(model)v(view)c(controller),和mvvm的显著区别是m和v之间存在耦合,业务逻辑集中在c当中。 用过springmvc应该会有体会。
vuejs源码用了什么设计模式，具体点的
最简单的订阅者模式
// Observer
class Observer {
constructor (data) {
this.walk(data)
}
walk (data) {
// 遍历
let keys = Object.keys(data)
for(let i = 0; i keys.length; i++){
defineReactive(data, keys[i], data[keys[i]])
}
}
}
function defineReactive (data, key, val) {
observer(val)
// dep 为什么要在这里实例化, 就是为了实现, 对象每一层的 每一个key都有自己的一个订阅实例, 比如 a.b 对应 dep1, a.c 对应dep2, 这里虽然都是let dep = new Dep()
// 但每次来到这个方法, dep都是独立的, 会一直保留在内存. 这样在每次调用set方法都能找到这个a.b对应的dep
// dep 这里会一直保存, 是因为闭包的关系, Object这个全局的函数, 引用了上层的作用域, 这个作用域包含了 dep, 除非Object = null, 或者退出浏览器, dep才会消失
//实例化之后, dep就有了被订阅, 和发布消息的功能, dep不写在这里也是可以的, 多定义一个全局函数, 每次obser的时候增加一个dep
let dep = new Dep()
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function () {
//每次new Watch('a.b'), 都会先执行get方法, 进而来到这里, 触发 dep.depend(), 这个dep就是 a.b 对应的 订阅,
dep.depend()
return val
},
set: function (newVal) {
if(val === newVal){
return
观察者模式是什么
官方解释：
观察者模式（有时又被称为发布-订阅Subscribe模式、模型-视图View模式、源-收听者Listener模式或从属者模式）是软件设计模式的一种。在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实作事件处理系统。
个人理解：
观察者模式是一种思想，不需要人为的去关注观察者和被观察者之间是怎样联系的，实现了解耦，只需要对象去注册被观察者（Observerable）与观察者(Observer)，然后被观察者去添加一个或者多个观察者，当被观察者发生变动就会立即通知所有的观察者，下面让我们来看看是怎样实现这个功能的。
被观察者首先通过addObserver(Observer o)来添加一个观察者，底层代码中会把这个对象o放进一个vector集合中，当然也可以添加多个观察者，当观察者发生变动的时候就会触发
setChanged();
notifyObservers();
这两个方法，然后底层代码中就回去遍历装有观察者的那个vector，然后
for (int i = arrLocal.length-1; i=0; i--)
((Observer)arrLocal[i]).update(this, arg);
调用update方法通知每一个观察者，这样观察者对象中就可以拿到被观察者的相关对象和信息
vue的数据双向绑定是怎么实现的
vue的数据双向绑定是通过数据劫持和发布－订阅者功能来实现的。
实现步骤：
1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者。
2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图。
3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者。
观察者模式确实很有用，但是在javascript实践里面，通常我们使用一种叫做发布／订阅模式的变体来实现观察者模式。
从图中也能看到，这两种模式很相似，但是也有一些值得注意的不同。
发布／订阅模式使用一个主题／事件频道，这个频道处于想要获取通知的订阅者和发起事件的发布者之间。这个事件系统允许代码定义应用相关的事件，这个事件可以传递特殊的参数，参数中包含有订阅者所需要的值。
观察者模式和发布订阅模式的不同点：
观察者模式要求想要接受相关通知的观察者必须到发起这个事件的被观察者上注册这个事件。
发布／订阅模式使用一个主题／事件频道（类似于中介／中间商），可以减少订阅者和发布者之间的依赖性。
发布／订阅模式中订阅者可以实现一个合适的事件处理函数，用于注册和接受由发布者广播的相关通知。
观察者模式的基本简介
观察者模式（Observer）完美的将观察者和被观察的对象分离开。举个例子，用户界面可以作为一个观察者，业务数据是被观察者，用户界面观察业务数据的变化，发现数据变化后，就显示在界面上。面向对象设计的一个原则是：系统中的每个类将重点放在某一个功能上，而不是其他方面。一个对象只做一件事情，并且将他做好。观察者模式在模块之间划定了清晰的界限，提高了应用程序的可维护性和重用性。
观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。
