- 订阅/发布模式（subscribe&publish）
订阅发布模式（又称观察者模式）定义了一种一对多的关系，
让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应操作
Vue的配置
<template>
<div>
<input v-model="a" type="text"/>
{{a}}
<div>
</template>
new Vue({
data: {
a: 1
},
computed: {
b: function() {
return this.a + 1;
}
}
})
// 发布者
var pub = {
publish: function() {
dep.notify()
}
}
// 订阅者1，2
var sub1 = { update: function(val) {
// 更新DOM1上的数据
}
var sub2 = { update: function(val) {
// 更新DOM2上的数据
}
// 主题对象，比如data对象的属性a
function Dep() {
this.subs = [sub1, sub2];
}
// a属性值变化之后，使用它的所有地方都要发生变化，比如computed的b就是以是一个订阅者，和模板里的a
Dep.prorotype.notify = function() {
this.subs.forEach((sub) => {
sub.update();
})
// 往主题对象，添加新的订阅者
Dep.prorotype.addSub= function() {
this.subs.push(sub);
}
Vue的源码解析可以分为3步骤
- 输入框以及文本节点与 data 中的数据绑定
将模板与data进行替换，最后输出可以渲染有真实数据的Dom（即渲染函数）- 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
- data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。
DocumentFragment
DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。
Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过 append 方法，DOM 中的节点会被自动删除）到 DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。
1. 输入框以及文本节点与 data 中的数据绑定，将模板与data进行替换，最后输出可以渲染有真实数据的Dom（即渲染函数）
function Compile(el) {
if (this.$el) {
// 将挂载元素里的字节点拷贝到fragment
this.$fragment = this.node2Fragment(this.$el);
// 执行编译函数，将模板转成DOM
this.init();
// 将替换好真实数据的Dom插入到挂载的元素里
this.$el.appendChild(this.$fragment);
}
}
Compile.prototype = {
// 初始化，执行编译函数
init: function() { this.compileElement(this.$fragment); },
//// 将挂载元素里的字节点拷贝到fragment
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(), child;
// 将原生节点拷贝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
}
//编译函数，
compileElement: function(el) {
var childNodes = el.childNodes, me = this;
[].slice.call(childNodes).forEach(function(node) {
var text = node.textContent;
var reg = /\{\{(.*)\}\}/; // 表达式文本
// 按元素节点方式编译
if (me.isElementNode(node)) {
me.compile(node);
// 按{{}}字符串模板的文本节点方式编译
} else if (me.isTextNode(node) && reg.test(text)) {
me.compileText(node, RegExp.$1);
}
// 遍历子节点，再进行编译
if (node.childNodes && node.childNodes.length) {
me.compileElement(node);
}
});
}
}
2. 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
3. 发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
function Compile(el) {
var childNodes = el.childNodes, me = this;
[].slice.call(childNodes).forEach(function(node) {
var text = node.textContent;
var reg = /\{\{(.*)\}\}/; // 表达式文本
// 按元素节点方式监听数据
if (me.isElementNode(node)) {
new Watcher(this, node, cb)
// 按{{}}字符串模板的文本节点方式监听数据
} else if (me.isTextNode(node) && reg.test(text)) {
new Watcher(this, node, cb)
}
// 遍历子节点，监听数据
if (node.childNodes && node.childNodes.length) {
new Watcher(this, childNodes , cb)
}
});
}
// 对DocumentFragment里的元素的data对象的属性值进行监听
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
// 此处为了触发属性的getter，从而在dep添加自己，结合Observer更易理解
this.value = this.get();
}
Watcher.prototype = {
update: function() {
this.run(); // 属性值变化收到通知
},
run: function() {
var value = this.get(); // 取到最新值
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调，更新视图
}
},
get: function() {
Dep.target = this; // 将当前订阅者指向自己
var value = this.vm[exp]; // 触发getter，添加自己到属性订阅器中
Dep.target = null; // 添加完毕，重置
return value;
}
};
// 这里再次列出Observer和Dep，方便理解
Object.defineProperty(data, key, {
get: function() {
// 由于需要在闭包内添加watcher，所以可以在Dep定义一个全局target属性，暂存watcher, 添加完移除
Dep.target && dep.addDep(Dep.target);
return val;
}
// ... 省略
});
Dep.prototype = {
notify: function() {
this.subs.forEach(function(sub) {
sub.update(); // 调用订阅者的update方法，通知变化
});
}
};
