- 訂閱/發(fā)布模式（subscribe&publish）
訂閱發(fā)布模式（又稱觀察者模式）定義了一種一對(duì)多的關(guān)系蠢护，
讓多個(gè)觀察者同時(shí)監(jiān)聽某一個(gè)主題對(duì)象赋咽，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有觀察者對(duì)象昔头。發(fā)布者發(fā)出通知 => 主題對(duì)象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)操作
Vue的配置
<template>
<div>
<input v-model="a" type="text"/>
{{a}}
<div>
</template>
new Vue({
data: {
a: 1
},
computed: {
b: function() {
return this.a + 1;
}
}
})
// 發(fā)布者
var pub = {
publish: function() {
dep.notify()
}
}
// 訂閱者1涨薪，2
var sub1 = { update: function(val) {
// 更新DOM1上的數(shù)據(jù)
}
var sub2 = { update: function(val) {
// 更新DOM2上的數(shù)據(jù)
}
// 主題對(duì)象辈赋，比如data對(duì)象的屬性a
function Dep() {
this.subs = [sub1, sub2];
}
// a屬性值變化之后慌烧，使用它的所有地方都要發(fā)生變化配猫，比如computed的b就是以是一個(gè)訂閱者，和模板里的a
Dep.prorotype.notify = function() {
this.subs.forEach((sub) => {
sub.update();
})
// 往主題對(duì)象杏死，添加新的訂閱者
Dep.prorotype.addSub= function() {
this.subs.push(sub);
}
Vue的源碼解析可以分為3步驟
- 輸入框以及文本節(jié)點(diǎn)與 data 中的數(shù)據(jù)綁定
將模板與data進(jìn)行替換泵肄，最后輸出可以渲染有真實(shí)數(shù)據(jù)的Dom（即渲染函數(shù)）- 輸入框內(nèi)容變化時(shí)，data 中的數(shù)據(jù)同步變化淑翼。即 view => model 的變化腐巢。
- data 中的數(shù)據(jù)變化時(shí)，文本節(jié)點(diǎn)的內(nèi)容同步變化。即 model => view 的變化。
DocumentFragment
DocumentFragment（文檔片段）可以看作節(jié)點(diǎn)容器酥筝，它可以包含多個(gè)子節(jié)點(diǎn)，當(dāng)我們將它插入到 DOM 中時(shí)胃惜，只有它的子節(jié)點(diǎn)會(huì)插入目標(biāo)節(jié)點(diǎn)，所以把它看作一組節(jié)點(diǎn)的容器哪雕。使用 DocumentFragment 處理節(jié)點(diǎn)船殉，速度和性能遠(yuǎn)遠(yuǎn)優(yōu)于直接操作 DOM。
Vue 進(jìn)行編譯時(shí)斯嚎，就是將掛載目標(biāo)的所有子節(jié)點(diǎn)劫持（真的是劫持利虫，通過 append 方法，DOM 中的節(jié)點(diǎn)會(huì)被自動(dòng)刪除）到 DocumentFragment 中堡僻，經(jīng)過一番處理后糠惫，再將 DocumentFragment 整體返回插入掛載目標(biāo)。
1. 輸入框以及文本節(jié)點(diǎn)與 data 中的數(shù)據(jù)綁定钉疫，將模板與data進(jìn)行替換硼讽，最后輸出可以渲染有真實(shí)數(shù)據(jù)的Dom（即渲染函數(shù)）
function Compile(el) {
if (this.$el) {
// 將掛載元素里的字節(jié)點(diǎn)拷貝到fragment
this.$fragment = this.node2Fragment(this.$el);
// 執(zhí)行編譯函數(shù)，將模板轉(zhuǎn)成DOM
this.init();
// 將替換好真實(shí)數(shù)據(jù)的Dom插入到掛載的元素里
this.$el.appendChild(this.$fragment);
}
}
Compile.prototype = {
// 初始化牲阁，執(zhí)行編譯函數(shù)
init: function() { this.compileElement(this.$fragment); },
//// 將掛載元素里的字節(jié)點(diǎn)拷貝到fragment
node2Fragment: function(el) {
var fragment = document.createDocumentFragment(), child;
// 將原生節(jié)點(diǎn)拷貝到fragment
while (child = el.firstChild) {
fragment.appendChild(child);
}
return fragment;
}
//編譯函數(shù)固阁，
compileElement: function(el) {
var childNodes = el.childNodes, me = this;
[].slice.call(childNodes).forEach(function(node) {
var text = node.textContent;
var reg = /\{\{(.*)\}\}/; // 表達(dá)式文本
// 按元素節(jié)點(diǎn)方式編譯
if (me.isElementNode(node)) {
me.compile(node);
// 按{{}}字符串模板的文本節(jié)點(diǎn)方式編譯
} else if (me.isTextNode(node) && reg.test(text)) {
me.compileText(node, RegExp.$1);
}
// 遍歷子節(jié)點(diǎn)，再進(jìn)行編譯
if (node.childNodes && node.childNodes.length) {
me.compileElement(node);
}
});
}
}
2. 輸入框內(nèi)容變化時(shí)咨油，data 中的數(shù)據(jù)同步變化您炉。即 view => model 的變化柒爵。
3. 發(fā)出通知 dep.notify() => 觸發(fā)訂閱者的 update 方法 => 更新視圖役电。
function Compile(el) {
var childNodes = el.childNodes, me = this;
[].slice.call(childNodes).forEach(function(node) {
var text = node.textContent;
var reg = /\{\{(.*)\}\}/; // 表達(dá)式文本
// 按元素節(jié)點(diǎn)方式監(jiān)聽數(shù)據(jù)
if (me.isElementNode(node)) {
new Watcher(this, node, cb)
// 按{{}}字符串模板的文本節(jié)點(diǎn)方式監(jiān)聽數(shù)據(jù)
} else if (me.isTextNode(node) && reg.test(text)) {
new Watcher(this, node, cb)
}
// 遍歷子節(jié)點(diǎn)，監(jiān)聽數(shù)據(jù)
if (node.childNodes && node.childNodes.length) {
new Watcher(this, childNodes , cb)
}
});
}
// 對(duì)DocumentFragment里的元素的data對(duì)象的屬性值進(jìn)行監(jiān)聽
function Watcher(vm, exp, cb) {
this.cb = cb;
this.vm = vm;
this.exp = exp;
// 此處為了觸發(fā)屬性的getter棉胀，從而在dep添加自己法瑟，結(jié)合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); // 執(zhí)行Compile中綁定的回調(diào)冀膝，更新視圖
}
},
get: function() {
Dep.target = this; // 將當(dāng)前訂閱者指向自己
var value = this.vm[exp]; // 觸發(fā)getter，添加自己到屬性訂閱器中
Dep.target = null; // 添加完畢霎挟，重置
return value;
}
};
// 這里再次列出Observer和Dep窝剖，方便理解
Object.defineProperty(data, key, {
get: function() {
// 由于需要在閉包內(nèi)添加watcher，所以可以在Dep定義一個(gè)全局target屬性酥夭，暫存watcher, 添加完移除
Dep.target && dep.addDep(Dep.target);
return val;
}
// ... 省略
});
Dep.prototype = {
notify: function() {
this.subs.forEach(function(sub) {
sub.update(); // 調(diào)用訂閱者的update方法赐纱，通知變化
});
}
};
文章參考：
剖析Vue原理實(shí)現(xiàn)雙向綁定MVVM
Vue.js雙向綁定的實(shí)現(xiàn)原理
