深入解析vue 1實現(xiàn)原理，并實現(xiàn)vue雙向數(shù)據(jù)綁定模型
vueImitate，此模型(vueImitate)只適用于學(xué)習(xí)和了解vue實現(xiàn)原理；無法作為項目中使用，沒有進行任何異常錯誤處理及各種使用場景的兼容；但通過此項目，可以讓你：
- 深入了解vue實現(xiàn)原理
- 親手一步一步自己實現(xiàn)vue相應(yīng)功能，包括雙向綁定、指令如v-model、v-show、v-bind等
整體效果如下：
下面我們重頭開始框架的實現(xiàn)，我們知道，vue的使用方式如下：
var vm = new Vue({
el: 'root',
data() {
return {
message: 'this is test',
number: 5,
number1: 1,
number2: 2,
showNode: false
}
},
methods: {
add() {
this.number1 += 1;
this.number += 1;
},
show() {
this.showNode = !this.showNode;
}
}
})
由此可見，vue為一個構(gòu)造函數(shù)，并且調(diào)用時傳入一個對象參數(shù)，所以主函數(shù)vueImitate可以如下，源碼可見這里；并對參數(shù)進行對應(yīng)的初始化處理：
// init.js
export default function vueImitate(options) {
this.options = options || {};
this.selector = options.el ? ('#' + options.el) : 'body'; // 根節(jié)點selector
this.data = typeof options.data === 'function' ? options.data() : options.data; // 保存?zhèn)魅氲膁ata
this.el = document.querySelectorAll(this.selector)[0]; // 保存根節(jié)點
this._directives = [];
}
此時可以使用new vueImitate(options)的方式進行調(diào)用，首先，我們需要界面上展示正確的數(shù)據(jù)，也就是將下面頁面進行處理，使其可以正常訪問；
我們可以參考vue的實現(xiàn)方式，vue將{{ }}這種綁定數(shù)據(jù)的方式轉(zhuǎn)化為指令(directive)，即v-text類似；而v-text又是如何進行數(shù)據(jù)綁定的呢？通過下面代碼可知，是通過對文本節(jié)點重新賦值方式實現(xiàn)，源碼見這里：
export default {
bind () {
this.attr = this.el.nodeType === 3
? 'data'
: 'textContent'
},
update (value) {
this.el[this.attr] = value
}
}
那么，問題來了，如果需要按照上面的方式實現(xiàn)數(shù)據(jù)的綁定，我們需要將現(xiàn)在的字符串{{number}}轉(zhuǎn)化為一個文本節(jié)點，并對它進行指令化處理；這些其實也就是vue compile(編譯)、link過程完成的，下面我們就先實現(xiàn)上面功能需求；
compile
整個編譯過程肯定從根元素開始，逐步向子節(jié)點延伸處理；
export default function Compile(vueImitate) {
vueImitate.prototype.compile = function() {
let nodeLink = compileNode(this.el),
nodeListLink = compileNodeList(this.el.childNodes, this),
_dirLength = this._directives.length;
nodeLink && nodeLink(this);
nodeListLink && nodeListLink(this);
let newDirectives = this._directives.slice(_dirLength);
for(let i = 0, _i = newDirectives.length; i < _i; i++) {
newDirectives[i]._bind();
}
}
}
function compileNode(el) {
let textLink, elementLink;
// 編譯文本節(jié)點
if(el.nodeType === 3 && el.data.trim()) {
textLink = compileTextNode(el);
} else if(el.nodeType === 1) {
elementLink = compileElementNode(el);
}
return function(vm) {
textLink && textLink(vm);
elementLink && elementLink(vm);
}
}
function compileNodeList(nodeList, vm) {
let nodeLinks = [], nodeListLinks = [];
if(!nodeList || !nodeList.length) {
return;
}
for(let i = 0, _i = nodeList.length; i < _i; i++) {
let node = nodeList[i];
nodeLinks.push(compileNode(node)),
nodeListLinks.push(compileNodeList(node.childNodes, vm));
}
return function(vm) {
if(nodeLinks && nodeLinks.length) {
for(let i = 0, _i = nodeLinks.length; i < _i; i++) {
nodeLinks[i] && nodeLinks[i](vm);
}
}
if(nodeListLinks && nodeListLinks.length) {
for(let i = 0, _i = nodeListLinks.length; i < _i; i++) {
nodeListLinks[i] && nodeListLinks[i](vm);
}
}
}
}
如上代碼，首先，我們通過定義一個Compile函數(shù)，將編譯方法放到構(gòu)造函數(shù)vueImitate.prototype，而方法中，首先主要使用compileNode編譯根元素，然后使用compileNodeList(this.el.childNodes, this)編譯根元素下面的子節(jié)點；而在compileNodeList中，通過對子節(jié)點進行循環(huán)，繼續(xù)編譯對應(yīng)節(jié)點及其子節(jié)點，如下代碼：
// function compileNodeList
for(let i = 0, _i = nodeList.length; i < _i; i++) {
let node = nodeList[i];
nodeLinks.push(compileNode(node)),
nodeListLinks.push(compileNodeList(node.childNodes, vm));
}
然后進行遞歸調(diào)用，直到最下層節(jié)點：而在對節(jié)點進行處理時，主要分為文本節(jié)點和元素節(jié)點；文本節(jié)點主要處理上面說的{{number}}的編譯，元素節(jié)點主要處理節(jié)點屬性如v-model、v-text、v-show、v-bind:click等處理；
function compileTextNode(el) {
let tokens = parseText(el.wholeText);
var frag = document.createDocumentFragment();
for(let i = 0, _i = tokens.length; i < _i; i++) {
let token = tokens[i], el = document.createTextNode(token.value)
frag.appendChild(el);
}
return function(vm) {
var fragClone = frag.cloneNode(true);
var childNodes = Array.prototype.slice.call(fragClone.childNodes), token;
for(let j = 0, _j = tokens.length; j < _j; j++) {
if((token = tokens[j]) && token.tag) {
let _el = childNodes[j], description = {
el: _el,
token: tokens[j],
def: publicDirectives['text']
}
vm._directives.push(new Directive(vm, _el, description))
}
}
// 通過這兒將`THIS IS TEST {{ number }} test` 這種轉(zhuǎn)化為三個textNode
if(tokens.length) {
replace(el, fragClone);
}
}
}
function compileElementNode(el) {
let attrs = getAttrs(el);
return function(vm) {
if(attrs && attrs.length) {
attrs.forEach((attr) => {
let name = attr.name, description, matched;
if(bindRE.test(attr.name)) {
description = {
el: el,
def: publicDirectives['bind'],
name: name.replace(bindRE, ''),
value: attr.value
}
} else if((matched = name.match(dirAttrRE))) {
description = {
el: el,
def: publicDirectives[matched[1]],
name: matched[1],
value: attr.value
}
}
if(description) {
vm._directives.push(new Directive(vm, el, description));
}
})
}
}
}
這里，先主要說明對文本節(jié)點的處理，我們上面說過，我們需要對{{number}}之類進行處理，我們首先必須將其字符串轉(zhuǎn)化為文本節(jié)點，如this is number1: {{number1}}這種，我們必須轉(zhuǎn)換為兩個文本節(jié)點，一個是this is number1:，它不需要進行任何處理；另一個是{{number1}}，它需要進行數(shù)據(jù)綁定，并實現(xiàn)雙向綁定；因為只有轉(zhuǎn)化為文本節(jié)點，才能使用v-text類似功能實現(xiàn)數(shù)據(jù)的綁定；而如何進行將字符串文本分割為不同的文本節(jié)點呢，那么，就只能使用正則方式let reg = /\{\{(.+?)\}\}/ig;將{{ number }}這種形式數(shù)據(jù)與普通正常文本分割之后，再分別創(chuàng)建textNode，如下：
function parseText(str) {
let reg = /\{\{(.+?)\}\}/ig;
let matchs = str.match(reg), match, tokens = [], index, lastIndex = 0;
while (match = reg.exec(str)) {
index = match.index
if (index > lastIndex) {
tokens.push({
value: str.slice(lastIndex, index)
})
}
tokens.push({
value: match[1],
html: match[0],
tag: true
})
lastIndex = index + match[0].length
}
return tokens;
}
通過上面parseText方法，可以將this is number: {{number}}轉(zhuǎn)化為如下結(jié)果：
轉(zhuǎn)化為上圖結(jié)果后，就對返回數(shù)組進行循環(huán)，分別通過創(chuàng)建文本節(jié)點;這兒為了性能優(yōu)化，先創(chuàng)建文檔碎片，將節(jié)點放入文檔碎片中；
// function compileTextNode
// el.wholeText => 'this is number: {{number}}'
let tokens = parseText(el.wholeText);
var frag = document.createDocumentFragment();
for(let i = 0, _i = tokens.length; i < _i; i++) {
let token = tokens[i], el = document.createTextNode(token.value)
frag.appendChild(el);
}
而在最后編譯完成，執(zhí)行linker時，主要做兩件事，第一是對需要雙向綁定的節(jié)點創(chuàng)建directive，第二是將整個文本節(jié)點進行替換；怎么替換呢？如最開始是一個文本節(jié)點this is number: {{number}}，經(jīng)過上面處理之后，在frag中其實是兩個文本節(jié)點this is number:和{{number}}；此時就使用replaceChild方法使用新的節(jié)點替換原始的節(jié)點；
// compile.js
function compileTextNode(el) {
let tokens = parseText(el.wholeText);
var frag = document.createDocumentFragment();
for(let i = 0, _i = tokens.length; i < _i; i++) {
let token = tokens[i], el = document.createTextNode(token.value)
frag.appendChild(el);
}
return function(vm) {
var fragClone = frag.cloneNode(true);
var childNodes = Array.prototype.slice.call(fragClone.childNodes), token;
// 創(chuàng)建directive
......
// 通過這兒將`THIS IS TEST {{ number }} test` 這種轉(zhuǎn)化為三個textNode
if(tokens.length) {
replace(el, fragClone);
}
}
}
// util.js
export function replace (target, el) {
var parent = target.parentNode
if (parent) {
parent.replaceChild(el, target)
}
}
替換后結(jié)果如下圖：
經(jīng)過與最開始圖比較可以發(fā)現(xiàn)，已經(jīng)將this is number: {{number}} middle {{number2}}轉(zhuǎn)化為this is number: number middle number2；只是此時，仍然展示的是變量名稱，如number,number2；那么，我們下面應(yīng)該做的肯定就是需要根據(jù)我們初始化時傳入的變量的值，將其進行正確的展示；最終結(jié)果肯定應(yīng)該為this is number: 5 middle 2；即將number替換為5、將number2替換為2;那么，如何實現(xiàn)上述功能呢，我們上面提過，使用指令(directive)的方式；下面，就開始進行指令的處理；
Directive(指令)
對于每一個指令，肯定是隔離開的，互相不受影響且有自己的一套處理方式；所以，我們就使用對象的方式；一個指令就是一個實例化的對象，彼此之間互不影響；如下代碼：
export default function Directive(vm, el, description) {
this.vm = vm;
this.el = el;
this.description = description;
this.expression = description ? description.value : '';
}
在創(chuàng)建一個指令時，需要傳入三個參數(shù)，一個是最開始初始化var vm = new vueImitate(options)時實例化的對象；而el是需要初始化指令的當前元素，如<p v-show="showNode">this is test</p>，需要創(chuàng)建v-show的指令，此時的el就是當前的p標簽；而description主要包含指令的描述信息；主要包含如下：
// 源碼見 './directives/text.js'
var text = {
bind () {
this.attr = this.el.nodeType === 3
? 'data'
: 'textContent'
},
update (value) {
this.el[this.attr] = value
}
}
// 如，'{{number}}'
description = {
el: el, // 需要創(chuàng)建指令的元素
def: text, // 對指令的操作方法，包括數(shù)據(jù)綁定(bind)、數(shù)據(jù)更新(update)，見上面 text
name: 'text', // 指令名稱
value: 'number' // 指令對應(yīng)數(shù)據(jù)的key
}
通過new Directive(vm, el, description)就創(chuàng)建了一個指令，并初始化一些數(shù)據(jù)；下面就先通過指令對界面進行數(shù)據(jù)渲染；所有邏輯就放到了_bind方法中，如下：
// directive.js
Directive.prototype._bind = function() {
extend(this, this.description.def);
if(this.bind) {
this.bind();
}
var self = this, watcher = new Watcher(this.vm, this.expression, function() {
self.update(watcher.value);
})
if(this.update) {
this.update(watcher.value);
}
}
// util.js
export function extend(to, from) {
Object.keys(from).forEach((key) => {
to[key] = from[key];
})
return to;
}
方法首先將傳入的指令操作方法合并到this上，方便調(diào)用，主要包括上面說的bind、update等方法；其主要根據(jù)指令不同，功能不同而不同定義；所有對應(yīng)均在./directives/*文件夾下面，包括文本渲染text.js、事件添加bind.js、v-model對應(yīng)model.js、v-show對應(yīng)show.js等；通過合并以后，就執(zhí)行this.bind()方法進行數(shù)據(jù)初始化綁定；但是，目前為止，當去看界面時，仍然沒有將number轉(zhuǎn)化為5；為什么呢？通過查看代碼：
export default {
bind () {
this.attr = this.el.nodeType === 3
? 'data'
: 'textContent'
},
update (value) {
this.el[this.attr] = value
}
}
bind并沒有改變節(jié)點展示值，而是通過update; 所以，如果調(diào)用this.update(123)，可發(fā)現(xiàn)有如下結(jié)果：
其實我們并不是直接固定數(shù)值，而是根據(jù)初始化時傳入的值動態(tài)渲染；但是目前為止，至少已經(jīng)完成了界面數(shù)據(jù)的渲染，只是數(shù)據(jù)不對而已；
然后，我們回頭看下編譯過程，我們需要在編譯過程去實例化指令(directive)，并調(diào)用其_bind方法，對指令進行初始化處理；
// 見compile.js 'function compileTextNode'
let _el = childNodes[j], description = {
el: _el,
name: 'text',
value: tokens[j].value,
def: publicDirectives['text']
}
vm._directives.push(new Directive(vm, _el, description));
// 見compile.js 'function compile'
let newDirectives = this._directives.slice(_dirLength);
for(let i = 0, _i = newDirectives.length; i < _i; i++) {
newDirectives[i]._bind();
}
上面說了，目前還沒有根據(jù)傳入的數(shù)據(jù)進行綁定，下面，就來對數(shù)據(jù)進行處理；
數(shù)據(jù)處理
數(shù)據(jù)處理包括以下幾個方面：
- 數(shù)據(jù)雙向綁定
- 數(shù)據(jù)變化后，需要通知到ui界面，并自動變化
- 對于輸入框，使用v-model時，需要將輸入內(nèi)容反應(yīng)到對應(yīng)數(shù)據(jù)
數(shù)據(jù)雙向綁定
需要實現(xiàn)雙向綁定，就是在數(shù)據(jù)變化后能夠自動的將對應(yīng)界面進行更新；那么，如何監(jiān)控數(shù)據(jù)的變化呢？目前有幾種方式，一種是angular的臟檢查方式，就是對用戶所以操作、會導(dǎo)致數(shù)據(jù)變化的行為進行攔截，如ng-click、$http、$timeout等；當用戶進行請求數(shù)據(jù)、點擊等時，會對所有的數(shù)據(jù)進行檢查，如果數(shù)據(jù)變化了，就會觸發(fā)對應(yīng)的處理；而另一種是vue的實現(xiàn)方式，使用Object.definProperty()方法，對數(shù)據(jù)添加setter和getter；當對數(shù)據(jù)進行賦值時，會自動觸發(fā)setter；就可以監(jiān)控數(shù)據(jù)的變化；主要處理如下, 源碼見這里：
export function Observer(data) {
this.data = data;
Object.keys(data).forEach((key) => {
defineProperty(data, key, data[key]);
})
}
export function observer(data, vm) {
if(!data || typeof data !== 'object') {
return;
}
let o = new Observer(data);
return o;
}
function defineProperty(data, key, val) {
let _value = data[key];
let childObj = observer(_value);
let dep = new Dep(); //生成一個調(diào)度中心，管理此字段的所有訂閱者
Object.defineProperty(data, key, {
enumerable: true, // 可枚舉
configurable: false, // 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},
set: function(value) {
val = value;
childObj = observer(value);
dep.notify();
}
})
}
Observer是一個構(gòu)造函數(shù)，主要對傳入的數(shù)據(jù)進行Object.defineProperty綁定；可以監(jiān)控到數(shù)據(jù)的變化；而在每一個Observer中，會初始化一個Dep的稱為‘調(diào)度管理器’的對象，它主要負責保存界面更新的操作和操作的觸發(fā)；
界面更新
在通過上面Observer實現(xiàn)數(shù)據(jù)監(jiān)控之后，如何通知界面更新呢？這里使用了‘發(fā)布／訂閱模式’；如果需要對此模式進行更深入理解，可查看此鏈接；而每個數(shù)據(jù)key都會維護了一個獨立的調(diào)度中心Dep;通過在上面defineProperty時創(chuàng)建；而Dep主要保存數(shù)據(jù)更新后的處理任務(wù)及對任務(wù)的處理，代碼也非常簡單，就是使用subs保存所有任務(wù)，使用addSub添加任務(wù)，使用notify處理任務(wù)，depend作用會在下面watcher中進行說明：
// Dep.js
let uid = 0;
// 調(diào)度中心
export default function Dep() {
this.id = uid++;
this.subs = []; //訂閱者數(shù)組
this.target = null; // 有何用處？
}
// 添加任務(wù)
Dep.prototype.addSub = function(sub) {
this.subs.push(sub);
}
// 處理任務(wù)
Dep.prototype.notify = function() {
this.subs.forEach((sub) => {
if(sub && sub.update && typeof sub.update === 'function') {
sub.update();
}
})
}
Dep.prototype.depend = function() {
Dep.target.addDep(this);
}
那么，處理任務(wù)來源哪兒呢？vue中又維護了一個watcher的對象，主要是對任務(wù)的初始化和收集處理；也就是一個watcher就是一個任務(wù)；而整個watcher代碼如下, 線上源碼見這里：
export default function Watcher(vm, expression, cb) {
this.cb = cb;
this.vm = vm;
this.expression = expression;
this.depIds = {};
if (typeof expression === 'function') {
this.getter = expOrFn;
} else {
this.getter = this.parseGetter(expression);
}
this.value = this.get();
}
let _prototype = Watcher.prototype;
_prototype.update = function() {
this.run();
}
_prototype.run = function() {
let newValue = this.get(), oldValue = this.value;
if(newValue != oldValue) {
this.value = newValue;
this.cb.call(this.vm, newValue);
}
}
_prototype.addDep = function(dep) {
// console.log(dep)
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this);
this.depIds[dep.id] = dep;
}
}
_prototype.get = function() {
Dep.target = this;
var value = this.getter && this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
}
_prototype.parseGetter = function(exp) {
if (/[^\w.$]/.test(exp)) return;
var exps = exp.split('.');
return function(obj) {
let value = '';
for (var i = 0, len = exps.length; i < len; i++) {
if (!obj) return;
value = obj[exps[i]];
}
return value;
}
}
在初始化watcher時，需要傳入vm(整個項目初始化時實例化的vueImitate對象，因為需要用到里面的對應(yīng)數(shù)據(jù))、expression(任務(wù)對應(yīng)的數(shù)據(jù)的key，如上面的‘number’)、cb(一個當數(shù)據(jù)變化后，界面如何更新的函數(shù)，也就是上面directive里面的update方法)；我們需要實現(xiàn)功能有，第一是每個任務(wù)有個update方法，主要用于在數(shù)據(jù)變化時，進行調(diào)用，即：
// 處理任務(wù)
Dep.prototype.notify = function() {
this.subs.forEach((sub) => {
if(sub && sub.update && typeof sub.update === 'function') {
sub.update();
}
})
}
第二個是在初始化watcher時，需要將實例化的watcher(任務(wù))放入調(diào)度中心dep的subs中；如何實現(xiàn)呢？這里，使用了一些黑科技，流程如下，這兒我們以expression為'number'為例：
1、在初始化watcher時，會去初始化一個獲取數(shù)據(jù)的方法this.getter就是，能夠通過傳入的expression取出對應(yīng)的值；如通過number取出對應(yīng)的初始化時的值5;
2、調(diào)用this.value = this.get();方法，方法中會去數(shù)據(jù)源中取值，并將此時的watcher放入Dep.target中備用，并返回取到的值；
// watcher.js
_prototype.get = function() {
Dep.target = this;
var value = this.getter && this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
}
3、因為我們在上面Observer已經(jīng)對數(shù)據(jù)進行了Object.defineProperty綁定，所以，當上面2步取值時，會觸發(fā)對應(yīng)的getter，如下, 觸發(fā)get函數(shù)之后，因為上面2已經(jīng)初始化Dep.target = this;了，所以會執(zhí)行dep.depend();，就是上面說的depend函數(shù)了：
// Observer.js
let dep = new Dep(); //生成一個調(diào)度中心，管理此字段的所有訂閱者
Object.defineProperty(data, key, {
enumerable: true, // 可枚舉
configurable: false, // 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},
set: function(value) {
val = value;
childObj = observer(value);
dep.notify();
}
})
3、觸發(fā)dep.depend();之后，如下代碼，會執(zhí)行Dep.target.addDep(this);, 此時的this就是上面實例化的dep, Dep.target則對應(yīng)的是剛剛1步中實例化的watcher，即執(zhí)行watcher.addDep(dep);
// Dep.js
Dep.prototype.depend = function() {
Dep.target.addDep(this);
}
4、觸發(fā)watcher.addDep(dep)，如下代碼，如果目前還沒此dep；就執(zhí)行dep.addSub(this);,此時的this就是指代當前watcher，也就是1步時實例化的watcher；此時dep是步驟3中實例化的dep; 即是，dep.addSub(watcher);
// watcher.js
_prototype.addDep = function(dep) {
// console.log(dep)
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this);
this.depIds[dep.id] = dep;
}
}
5、最后執(zhí)行dep.addSub(watcher);，如下代碼，到這兒，就將初始化的watcher添加到了調(diào)度中心的數(shù)組中；
// Dep.js
Dep.prototype.addSub = function(sub) {
this.subs.push(sub);
}
那么，在哪兒去初始化watcher呢？就是在對指令進行_bind()時，如下代碼，在執(zhí)行_bind時，會實例化Watcher; 在第三個參數(shù)的回調(diào)函數(shù)里執(zhí)行self.update(watcher.value);，也就是當監(jiān)控到數(shù)據(jù)變化，會執(zhí)行對應(yīng)的update方法進行更新；
// directive.js
Directive.prototype._bind = function() {
extend(this, this.description.def);
if(this.bind) {
this.bind();
}
var self = this,
watcher = new Watcher(this.vm, this.expression, function() {
self.update(watcher.value);
})
if(this.update) {
this.update(watcher.value);
}
}
而前面說了，開始時沒有數(shù)據(jù)，使用this.update(123)會將界面對應(yīng)number更新為123，當時沒有對應(yīng)number真實數(shù)據(jù)；而此時，在watcher中，獲取到了對應(yīng)數(shù)據(jù)并保存到value中，因此，就執(zhí)行this.update(watcher.value);，此時就可以將真實數(shù)據(jù)與界面進行綁定，并且當數(shù)據(jù)變化時，界面也會自動進行更新；最終結(jié)果如下圖：
為什么所有數(shù)據(jù)都是undefined呢？我們可以通過下面代碼知道, 在實例化watcher時，調(diào)用this.value = this.get();時，其實是通過傳入的key在this.vm中直接取值；但是我們初始化時，所有值都是通過this.options = options || {};放到this.options里面，所以根本無法取到：
// watcher.js
_prototype.get = function() {
Dep.target = this;
var value = this.getter && this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
}
_prototype.parseGetter = function(exp) {
if (/[^\w.$]/.test(exp)) return;
var exps = exp.split('.');
return function(obj) {
let value = '';
for (var i = 0, len = exps.length; i < len; i++) {
if (!obj) return;
value = obj[exps[i]];
}
return value;
}
}
那么，我們?nèi)绾文苤苯涌梢酝ㄟ^諸如this.number取到值呢？只能如下，通過下面extend(this, data);方式，就將數(shù)據(jù)綁定到了實例化的vueImitate上面；
import { extend } from './util.js';
import { observer } from './Observer.js';
import Compile from './compile.js';
export default function vueImitate(options) {
this.options = options || {};
this.selector = options.el ? ('#' + options.el) : 'body';
this.data = typeof options.data === 'function' ? options.data() : options.data;
this.el = document.querySelectorAll(this.selector)[0];
this._directives = [];
this.initData();
this.compile();
}
Compile(vueImitate);
vueImitate.prototype.initData = function() {
let data = this.data, self = this;
extend(this, data);
observer(this.data);
}
處理后結(jié)果如下：
數(shù)據(jù)也綁定上了，但是當我們嘗試使用下面方式對數(shù)據(jù)進行改變時，發(fā)現(xiàn)并沒有自動更新到界面，界面數(shù)據(jù)并沒有變化；
methods: {
add() {
this.number1 += 1;
this.number += 1;
}
}
為什么呢？通過上面代碼可知，我們其實observer的是vueImitate實例化對象的data對象；而我們更改值是通過this.number += 1;實現(xiàn)的；其實并沒有改vueImitate.data.number的值，而是改vueImitate.number的值，所以也就不會觸發(fā)observer里面的setter；也不會去觸發(fā)對應(yīng)的watcher里面的update；那如何處理呢？我們可以通過如下方式實現(xiàn), 完整源碼見這里：
// init.js
vueImitate.prototype.initData = function() {
let data = this.data, self = this;
extend(this, data);
Object.keys(data).forEach((key) => {
Object.defineProperty(self, key, {
set: function(newVal) {
self.data[key] = newVal;
},
get: function() {
return self.data[key];
}
})
})
observer(this.data);
}
這里通過對vueImitate里對應(yīng)的data的屬性進行Object.defineProperty處理，當對其進行賦值時，會再將其值賦值到vueImitate.data對應(yīng)的屬性上面，那樣，就會去觸發(fā)observer(this.data);里面的setter，從而去更新界面數(shù)據(jù)；
至此，整個數(shù)據(jù)處理就已經(jīng)完成，總結(jié)一下：
1、首先，在初始化vueImitate時，我們會將初始化數(shù)據(jù)通過options.data傳入，后會進行處理，保存至this.data中；
2、通過initData方法將數(shù)據(jù)綁定到vueImitate實例化對象上面，并對其進行數(shù)據(jù)監(jiān)控，然后使用observer對this.data進行監(jiān)控，在實例化Observer時，會去實例化一個對應(yīng)的調(diào)度中心Dep；
3、在編譯過程中，會創(chuàng)建指令，通過指令實現(xiàn)每個需要處理節(jié)點的數(shù)據(jù)處理和雙向綁定；
4、在指令_bind()時，會去實例化對應(yīng)的watcher，創(chuàng)建一個任務(wù)，主要實現(xiàn)數(shù)據(jù)獲取、數(shù)據(jù)變化時，對應(yīng)界面更新(也就是更新函數(shù)的調(diào)用)、并將生成的watcher存儲到對應(yīng)的步驟2中實例化的調(diào)度中心中；
5、當數(shù)據(jù)更新時，會觸發(fā)對應(yīng)的setter，然后調(diào)用dep.notify();觸發(fā)調(diào)度中心中所有任務(wù)的更新，即執(zhí)行所有的watcher.update，從而實現(xiàn)對應(yīng)界面的更新；
到目前為止，整個框架的實現(xiàn)基本已經(jīng)完成。其中包括compile、linker、oberver、directive(v-model、v-show、v-bind、v-text)、watcher；如果需要更深入的研究，可見項目代碼; 可以自己clone下來，運行起來；文中有些可能思考不夠充分，忘見諒，也歡迎大家指正；
