摘要：需要指令解析器，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)。然后將模版中的變量替換成數(shù)據(jù)，渲染，將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)發(fā)生變動(dòng)，收到通知，更新視圖。

用了Vue也有兩年時(shí)間了，一直以來(lái)都是只知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學(xué)習(xí)一下Vue底層的基本原理。

Vue官網(wǎng)有一段這樣的介紹：當(dāng)你把一個(gè)普通的JavaScript對(duì)象傳給Vue實(shí)例的data選項(xiàng)，Vue將遍歷此對(duì)象所有的屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為getter/setter。Object.defineProperty是ES5中一個(gè)無(wú)法shim的特性，這也就是為什么Vue不支持 IE8 以及更低版本瀏覽器。

通過(guò)這一段的介紹不難可以得出，Vue是通過(guò)Object.defineProperty對(duì)實(shí)例中的data數(shù)據(jù)做了挾持并且使用Object.defineProperty的getter/setter并對(duì)其進(jìn)行處理之后完成了數(shù)據(jù)的與視圖的同步。

這張圖應(yīng)該不會(huì)很陌生，熟悉Vue的同學(xué)如果仔細(xì)閱讀過(guò)Vue文檔的話應(yīng)該都看到過(guò)。猜想一下Vue使用Object.defineProperty做為ViewModel，對(duì)數(shù)據(jù)進(jìn)行挾持之后如果View和Model發(fā)生變化的話，就會(huì)通知其相對(duì)應(yīng)引用的地方進(jìn)行更新處理，完成視圖的與數(shù)據(jù)的雙向綁定。

下面舉個(gè)例子：

html:

javaScript:

var obj = {};
Object.defineProperty(obj,"name",{
    get() {
        return document.querySelector("#name").innerHTML;
    },
    set(val) {
        document.querySelector("#name").innerHTML = val;
    }
})
obj.name = "Aaron";

通過(guò)上面的代碼使用Object.defineProperty對(duì)Obj對(duì)象中的name屬性進(jìn)行了挾持，一旦該屬性發(fā)生了變化則會(huì)觸發(fā)set函數(shù)執(zhí)行，做出響應(yīng)的操作。

扯了這么多，具體說(shuō)一下Vue實(shí)現(xiàn)的原理。

需要數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者。

需要指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)。

一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖。

MVVM入口函數(shù)，整合以上三者，實(shí)現(xiàn)數(shù)據(jù)響應(yīng)。

接下來(lái)的文章將沿著這個(gè)思路一步一步向下進(jìn)行，以便完成一個(gè)簡(jiǎn)單的Vue類，完成數(shù)據(jù)與視圖的實(shí)時(shí)更新。

    
{{name}}
    

    
{{age}}
    
{{doubleAge}}
    
    點(diǎn)擊
    

以上代碼則是需要完成的功能，保證所有功能全部都能實(shí)現(xiàn)。

首先我們要考慮的是，要?jiǎng)?chuàng)建一個(gè)Vue的類，該類接收的是一個(gè)options的對(duì)象，也就是我們?cè)趯?shí)例化Vue的時(shí)候需要傳遞的參數(shù)。

class QVue {
    constructor(options){
        //  緩存options對(duì)象數(shù)據(jù)
        this.$options = options;
        //  取出data數(shù)據(jù)，做數(shù)據(jù)響應(yīng)
        this.$data = options.data || {};
    }
}

通過(guò)上面的代碼可以看出了，為什么我們可以在Vue實(shí)例上通過(guò)this.$data拿到我們所寫的data數(shù)據(jù)。

對(duì)數(shù)據(jù)已經(jīng)進(jìn)行了緩存之后，接下來(lái)要做的事情就是對(duì)數(shù)據(jù)進(jìn)行觀察，達(dá)到數(shù)據(jù)變化之后能夠做出對(duì)虛擬Dom的操作。

class QVue {
    constructor(options){
        this.$options = options;
        //  數(shù)據(jù)響應(yīng)
        this.$data = options.data || {};
        //  監(jiān)聽數(shù)據(jù)變化
        this.observe(this.$data);
        //  主要用來(lái)解析各種指令，比如v-modal，v-on:click等指令
        new Compile(options.el,this);
        //  執(zhí)行生命周期
        if(options.created){
            options.created.call(this);
        }
    }
    // 觀察數(shù)據(jù)變化
    observe(value){
        if(!value || typeof value !== "object"){
            return;
        }
        let keys = Object.keys(value);
        keys.forEach((key)=> {
            this.defineReactive(value,key,value[key]);
            //  代理data中的屬性到vue實(shí)例上
            this.proxyData(key);
        })
    }
    //  代理Data
    proxyData(key){
        Object.defineProperty(this,key,{
            get(){
                return this.$data[key];
            },
            set(newVal){
                this.$data[key] = newVal;
            }
        })
    }
    //  數(shù)據(jù)響應(yīng)
    defineReactive(obj,key,val){
        //  解決數(shù)據(jù)層次嵌套
        this.observe(val);
        const dep = new Dep();
        Object.defineProperty(obj, key,{
            get(){
                //  向管理watcher的對(duì)象追加watcher實(shí)例
                //  方便管理
                Dep.target && dep.appDep(Dep.target);
                return val;
            },
            set(newVal){
                if(newVal === val){
                    return;
                }
                val = newVal;
                // console.log(`${key}更新了：${newVal}`)
                dep.notify();
            }
        })
    }
}

我們對(duì)data數(shù)據(jù)中的每一項(xiàng)都進(jìn)行了數(shù)據(jù)挾持，可是然而并沒(méi)有什么卵用啊，我們并沒(méi)有對(duì)相對(duì)應(yīng)的虛擬dom進(jìn)行數(shù)據(jù)改變，當(dāng)然我們肯定是不能把我們的需要更改的虛擬dom操作寫在這里，然而在Vue中對(duì)其Dom進(jìn)行了特殊的處理，慢慢的向下看。

想要做數(shù)據(jù)響應(yīng)要做一個(gè)做具體更新的類何以用來(lái)管理這些觀察者的類

//  管理watcher
class Dep {
    constructor() {
        //  存儲(chǔ)
        this.deps = [];
    }
    //  添加watcher
    appDep(dep){
        this.deps.push(dep);
    }
    //  通知所有的watcher進(jìn)行更新
    notify(){
        this.deps.forEach((dep) => {
            dep.update();
        })
    }
}
//  觀察者 做具體更新
class Watcher {
    constructor(vm,key,cb){
        //  Vue實(shí)例
        this.vm = vm;
        //  需要更新的key
        this.key = key;
        //  更新后執(zhí)行的函數(shù)
        this.cb = cb;
        //  將當(dāng)前watcher實(shí)例指定到Dep靜態(tài)屬性target
        //  用來(lái)在類間進(jìn)行通信
        Dep.target = this;
        //  觸發(fā)getter,添加依賴
        this.vm[this.key];
        Dep.target = null;
    }
    update(){
        this.cb.call(this.vm,this.vm[this.key]);
    }
}

Dep.target = this上面這段代碼一定要注意，是向Dep類中添加了一個(gè)靜態(tài)屬性。

主要用來(lái)解析各種指令，比如v-modal，v-on:click等指令。然后將模版中的變量替換成數(shù)據(jù)，渲染view，將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)發(fā)生變動(dòng)，收到通知，更新視圖。

簡(jiǎn)單說(shuō)下雙向綁定，雙向綁定原理，在編譯的時(shí)候可以解析出v-model在做操作的時(shí)候，在使用v-model元素上添加了一個(gè)事件監(jiān)聽（input），把事件監(jiān)聽的回調(diào)函數(shù)作為事件監(jiān)聽的回調(diào)函數(shù)，如果input發(fā)生變化的時(shí)候把最新的值設(shè)置到vue的實(shí)例上，因?yàn)関ue已經(jīng)實(shí)現(xiàn)了數(shù)據(jù)的響應(yīng)化，響應(yīng)化的set函數(shù)會(huì)觸發(fā)界面中所有依賴模塊的更新，然后通知哪些model做依賴更新，所以界面中所有跟這個(gè)數(shù)據(jù)有管的東西就更新了。

class Compile {
    constructor(el,vm) {
        //  要遍歷的宿主節(jié)點(diǎn)
        this.$el = document.querySelector(el);
        this.$vm = vm;

        //  編譯
        if(this.$el){
            //  轉(zhuǎn)換宿主節(jié)點(diǎn)內(nèi)容為片段Fragment元素
            this.$fragment = this.node2Fragment(this.$el);
            //  執(zhí)行編譯過(guò)程
            this.compile(this.$fragment);
            //  將編譯完的HTML結(jié)果追加至宿主節(jié)點(diǎn)中
            this.$el.appendChild(this.$fragment);
        }
    }

    //  將宿主元素中代碼片段取出來(lái)，遍歷，這樣做比較高效
    node2Fragment(el){
        const frag = document.createDocumentFragment();
        //  將宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
        let child;
        //  如果 el.firstChild 為undefined或null則會(huì)停止循環(huán)
        while(child = el.firstChild){
            frag.appendChild(child);
        }
        return frag;
    }

    compile(el){
        //  宿主節(jié)點(diǎn)下的所有子元素
        const childNodes = el.childNodes;
        Array.from(childNodes).forEach((node) => {
            if(this.isElement(node)){
                //  如果是元素
                console.log("編譯元素"+node.nodeName)
                //  拿到元素上所有的執(zhí)行,偽數(shù)組
                const nodeAttrs = node.attributes;
                Array.from(nodeAttrs).forEach((attr) => {
                    //  屬性名
                    const attrName = attr.name; 
                    //  屬性值
                    const exp = attr.value;     
                    //  如果是指令
                    if(this.isDirective(attrName)){
                        //  q-text
                        //  獲取指令后面的內(nèi)容
                        const dir = attrName.substring(2);
                        //  執(zhí)行更新
                        this[dir] && this[dir](node,this.$vm,exp);
                    }
                    //  如果是事件
                    if(this.isEvent(attrName)){
                        //  事件處理
                        let dir = attrName.substring(1);    //  @
                        this.eventHandler(node,this.$vm,exp,dir);
                    }
                })
            }else if(this.isInterpolation(node)){
                //  如果是插值文本
                this.compileText(node);
                console.log("編譯文本"+node.textContent)
            }
            //  遞歸子元素，解決元素嵌套問(wèn)題
            if(node.childNodes && node.childNodes.length){
                this.compile(node);
            }
        })
    }
    //  是否為節(jié)點(diǎn)
    isElement(node){
        return node.nodeType === 1;
    }
    //  是否為插值文本
    isInterpolation(node){
        return node.nodeType === 3 && /{{(.*)}}/.test(node.textContent);
    }
    //  是否為指令
    isDirective(attr){
        return attr.indexOf("q-") == 0;
    }
    // 是否為事件
    isEvent(attr){
        return attr.indexOf("@") == 0;
    }

    //  v-text
    text(node,vm,exp){
        this.update( node, vm, exp, "text");
    }
    textUpdater(node,value){
        node.textContent = value;
    }

    //  雙向綁定
    //  v-model
    model(node,vm,exp){
        //  指定input的value屬性，模型到視圖的綁定
        this.update(node,vm,exp,"model");
        //  試圖對(duì)模型的響應(yīng)
        node.addEventListener("input",(e) => {
            vm[exp] = e.target.value;
        })
    }
    modelUpdater(node,value){
        node.value = value;
    }

    //  v-html
    html(node,vm,exp){
        this.update(node,vm,exp,"html")
    }
    htmlUpdater(node,value){
        node.innerHTML = value;
    }
    
    //  更新插值文本
    compileText(node){
        let key = RegExp.$1;
        this.update( node, this.$vm, key, "text");
    }
    //  事件處理器
    eventHandler(node,vm,exp,dir){
        let fn = vm.$options.methods && vm.$options.methods[exp];
        if(dir && fn){
            node.addEventListener(dir,fn.bind(vm));
        }
    }

    //  更新函數(shù) - 橋接
    update(node,vm,exp,dir){
        const updateFn = this[`${dir}Updater`];
        //  初始化
        updateFn && updateFn(node,vm[exp]);
        //  依賴收集
        new Watcher(vm,exp,function(value){
            updateFn && updateFn(node,value);
        })
    }
}

其實(shí)Compile整個(gè)編譯過(guò)程，就是在做一個(gè)依賴收集的工作，然Vue知道每一個(gè)指令是做什么的。并做出對(duì)應(yīng)的更新處理。

Vue整體的編譯過(guò)程，因?yàn)関ue所編寫的指令html無(wú)法進(jìn)行識(shí)別，通過(guò)編譯的過(guò)程可以進(jìn)行依賴收集，依賴收集以后把data中的數(shù)據(jù)和視圖進(jìn)行了關(guān)聯(lián)，產(chǎn)生了依賴關(guān)系，如果以后數(shù)據(jù)模型發(fā)生變化我們可以通過(guò)這些依賴通知這些視圖進(jìn)行更新，這是執(zhí)行編譯的目的，就可以做到數(shù)據(jù)模型驅(qū)動(dòng)視圖變化。

參考文章：

vue中的雙向數(shù)據(jù)綁定詳解

Vue雙向綁定實(shí)現(xiàn)