前言

使用vue也好有一段時(shí)間了油坝，雖然對(duì)其雙向綁定原理也有了解個(gè)大概焕窝，但也沒好好探究下其原理實(shí)現(xiàn)蹬挺，所以這次特意花了幾晚時(shí)間查閱資料和閱讀相關(guān)源碼，自己也實(shí)現(xiàn)一個(gè)簡(jiǎn)單版vue的雙向綁定版本袜啃，先上個(gè)成果圖來吸引各位：
代碼：

image

本文主要介紹兩大內(nèi)容：

1. vue數(shù)據(jù)雙向綁定的原理起愈。

2. 實(shí)現(xiàn)簡(jiǎn)單版vue的過程，主要實(shí)現(xiàn){{}}、v-model和事件指令的功能抬虽。

相關(guān)代碼地址：https://github.com/canfoo/self-vue

vue數(shù)據(jù)雙向綁定原理

vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的官觅，我們可以先來看一下通過控制臺(tái)輸出一個(gè)定義在vue初始化數(shù)據(jù)上的對(duì)象是個(gè)什么東西。

代碼：

var vm = new Vue({
    data: {
        obj: {
            a: 1
        }
    },
    created: function () {
        console.log(this.obj);
    }
});

結(jié)果：

我們可以看到屬性a有兩個(gè)相對(duì)應(yīng)的get和set方法阐污，為什么會(huì)多出這兩個(gè)方法呢休涤？因?yàn)関ue是通過Object.defineProperty()來實(shí)現(xiàn)數(shù)據(jù)劫持的。

Object.defineProperty( )是用來做什么的笛辟？它可以來控制一個(gè)對(duì)象屬性的一些特有操作功氨，比如讀寫權(quán)、是否可以枚舉手幢，這里我們主要先來研究下它對(duì)應(yīng)的兩個(gè)描述屬性get和set捷凄，如果還不熟悉其用法，請(qǐng)點(diǎn)擊這里閱讀更多用法围来。

在平常无拗，我們很容易就可以打印出一個(gè)對(duì)象的屬性數(shù)據(jù)：

var Book = {
  name: 'vue權(quán)威指南'
};
console.log(Book.name);  // vue權(quán)威指南

如果想要在執(zhí)行console.log(book.name)的同時(shí)玛荞，直接給書名加個(gè)書名號(hào)，那要怎么處理呢？或者說要通過什么監(jiān)聽對(duì)象 Book 的屬性值挂疆。這時(shí)候Object.defineProperty( )就派上用場(chǎng)了，代碼如下：

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一個(gè)書名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
 
Book.name = 'vue權(quán)威指南';  // 你取了一個(gè)書名叫做vue權(quán)威指南
console.log(Book.name);  // 《vue權(quán)威指南》

我們通過Object.defineProperty( )設(shè)置了對(duì)象Book的name屬性乾胶，對(duì)其get和set進(jìn)行重寫操作捌年，顧名思義，get就是在讀取name屬性這個(gè)值觸發(fā)的函數(shù)醇滥，set就是在設(shè)置name屬性這個(gè)值觸發(fā)的函數(shù)黎比，所以當(dāng)執(zhí)行 Book.name = 'vue權(quán)威指南' 這個(gè)語句時(shí)，控制臺(tái)會(huì)打印出 "你取了一個(gè)書名叫做vue權(quán)威指南"鸳玩，緊接著阅虫，當(dāng)讀取這個(gè)屬性時(shí)，就會(huì)輸出 "《vue權(quán)威指南》"不跟，因?yàn)槲覀冊(cè)趃et函數(shù)里面對(duì)該值做了加工了颓帝。如果這個(gè)時(shí)候我們執(zhí)行下下面的語句，控制臺(tái)會(huì)輸出什么窝革？

console.log(Book);

結(jié)果：

乍一看购城，是不是跟我們?cè)谏厦娲蛴ue數(shù)據(jù)長(zhǎng)得有點(diǎn)類似，說明vue確實(shí)是通過這種方法來進(jìn)行數(shù)據(jù)劫持的虐译。接下來我們通過其原理來實(shí)現(xiàn)一個(gè)簡(jiǎn)單版的mvvm雙向綁定代碼瘪板。

思路分析

實(shí)現(xiàn)mvvm主要包含兩個(gè)方面，數(shù)據(jù)變化更新視圖漆诽，視圖變化更新數(shù)據(jù)：

關(guān)鍵點(diǎn)在于data如何更新view侮攀，因?yàn)関iew更新data其實(shí)可以通過事件監(jiān)聽即可锣枝，比如input標(biāo)簽監(jiān)聽 'input' 事件就可以實(shí)現(xiàn)了。所以我們著重來分析下兰英，當(dāng)數(shù)據(jù)改變撇叁，如何更新視圖的。

數(shù)據(jù)更新視圖的重點(diǎn)是如何知道數(shù)據(jù)變了箭昵，只要知道數(shù)據(jù)變了税朴，那么接下去的事都好處理。如何知道數(shù)據(jù)變了家制，其實(shí)上文我們已經(jīng)給出答案了正林，就是通過Object.defineProperty( )對(duì)屬性設(shè)置一個(gè)set函數(shù)，當(dāng)數(shù)據(jù)改變了就會(huì)來觸發(fā)這個(gè)函數(shù)颤殴，所以我們只要將一些需要更新的方法放在這里面就可以實(shí)現(xiàn)data更新view了觅廓。

思路有了，接下去就是實(shí)現(xiàn)過程了涵但。

實(shí)現(xiàn)過程

我們已經(jīng)知道實(shí)現(xiàn)數(shù)據(jù)的雙向綁定杈绸，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽，所以我們需要設(shè)置一個(gè)監(jiān)聽器Observer矮瘟，用來監(jiān)聽所有屬性瞳脓。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新澈侠。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)劫侧，所以我們需要有一個(gè)消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的哨啃。接著烧栋，我們還需要有一個(gè)指令解析器Compile，對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析拳球，將相關(guān)指令對(duì)應(yīng)初始化成一個(gè)訂閱者Watcher审姓，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時(shí)當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化祝峻，就會(huì)執(zhí)行對(duì)應(yīng)的更新函數(shù)魔吐，從而更新視圖。因此接下去我們執(zhí)行以下3個(gè)步驟莱找，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定：

1.實(shí)現(xiàn)一個(gè)監(jiān)聽器Observer酬姆，用來劫持并監(jiān)聽所有屬性，如果有變動(dòng)的宋距，就通知訂閱者轴踱。
2.實(shí)現(xiàn)一個(gè)訂閱者Watcher症脂，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)谚赎，從而更新視圖淫僻。
3.實(shí)現(xiàn)一個(gè)解析器Compile，可以掃描和解析每個(gè)節(jié)點(diǎn)的相關(guān)指令壶唤，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器雳灵。

流程圖如下：

1.實(shí)現(xiàn)一個(gè)Observer

Observer是一個(gè)數(shù)據(jù)監(jiān)聽器，其實(shí)現(xiàn)核心方法就是前文所說的Object.defineProperty( )闸盔。如果要對(duì)所有屬性都進(jìn)行監(jiān)聽的話悯辙，那么可以通過遞歸方法遍歷所有屬性值，并對(duì)其進(jìn)行Object.defineProperty( )處理迎吵。如下代碼躲撰，實(shí)現(xiàn)了一個(gè)Observer。

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了击费，現(xiàn)在值為：“' + newVal.toString() + '”');
        }
    });
}
 
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};
 
var library = {
    book1: {
        name: ''
    },
    book2: ''
};
observe(library);
library.book1.name = 'vue權(quán)威指南'; // 屬性name已經(jīng)被監(jiān)聽了拢蛋，現(xiàn)在值為：“vue權(quán)威指南”
library.book2 = '沒有此書籍';  // 屬性book2已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“沒有此書籍”

思路分析中蔫巩，需要?jiǎng)?chuàng)建一個(gè)可以容納訂閱者的消息訂閱器Dep谆棱，訂閱器Dep主要負(fù)責(zé)收集訂閱者，然后在屬性變化的時(shí)候執(zhí)行對(duì)應(yīng)訂閱者的更新函數(shù)圆仔。所以顯然訂閱器需要有一個(gè)容器垃瞧，這個(gè)容器就是list，將上面的Observer稍微改造下坪郭，植入消息訂閱器：

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (是否需要添加訂閱者) {
                dep.addSub(watcher); // 在這里添加一個(gè)訂閱者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了个从，現(xiàn)在值為：“' + newVal.toString() + '”');
            dep.notify(); // 如果數(shù)據(jù)變化，通知所有訂閱者
        }
    });
}
 
function Dep () {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

從代碼上看截粗，我們將訂閱器Dep添加一個(gè)訂閱者設(shè)計(jì)在getter里面信姓，這是為了讓W(xué)atcher初始化進(jìn)行觸發(fā)，因此需要判斷是否要添加訂閱者绸罗，至于具體設(shè)計(jì)方案意推，下文會(huì)詳細(xì)說明的。在setter函數(shù)里面珊蟀，如果數(shù)據(jù)變化菊值，就會(huì)去通知所有訂閱者，訂閱者們就會(huì)去執(zhí)行對(duì)應(yīng)的更新的函數(shù)育灸。到此為止腻窒，一個(gè)比較完整Observer已經(jīng)實(shí)現(xiàn)了，接下來我們開始設(shè)計(jì)Watcher磅崭。

2.實(shí)現(xiàn)Watcher

訂閱者Watcher在初始化的時(shí)候需要將自己添加進(jìn)訂閱器Dep中儿子，那該如何添加呢？我們已經(jīng)知道監(jiān)聽器Observer是在get函數(shù)執(zhí)行了添加訂閱者Wather的操作的砸喻，所以我們只要在訂閱者Watcher初始化的時(shí)候觸發(fā)對(duì)應(yīng)的get函數(shù)去執(zhí)行添加訂閱者操作即可柔逼，那要如何觸發(fā)get的函數(shù)蒋譬，再簡(jiǎn)單不過了，只要獲取對(duì)應(yīng)的屬性值就可以觸發(fā)了愉适，核心原因就是因?yàn)槲覀兪褂昧薕bject.defineProperty( )進(jìn)行數(shù)據(jù)監(jiān)聽犯助。這里還有一個(gè)細(xì)節(jié)點(diǎn)需要處理，我們只要在訂閱者Watcher初始化的時(shí)候才需要添加訂閱者维咸，所以需要做一個(gè)判斷操作剂买，因此可以在訂閱器上做一下手腳：在Dep.target上緩存下訂閱者，添加成功后再將其去掉就可以了癌蓖。訂閱者Watcher的實(shí)現(xiàn)如下：

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 將自己添加到訂閱器的操作
}
 
Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() {
        Dep.target = this;  // 緩存自己
        var value = this.vm.data[this.exp]  // 強(qiáng)制執(zhí)行監(jiān)聽器里的get函數(shù)
        Dep.target = null;  // 釋放自己
        return value;
    }
};

這時(shí)候瞬哼，我們需要對(duì)監(jiān)聽器Observer也做個(gè)稍微調(diào)整，主要是對(duì)應(yīng)Watcher類原型上的get函數(shù)租副。需要調(diào)整地方在于defineReactive函數(shù)：

function defineReactive(data, key, val) {
    observe(val); // 遞歸遍歷所有子屬性
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if (Dep.target) {  // 判斷是否需要添加訂閱者
                dep.addSub(Dep.target); // 在這里添加一個(gè)訂閱者
            }
            return val;
        },
        set: function(newVal) {
            if (val === newVal) {
                return;
            }
            val = newVal;
            console.log('屬性' + key + '已經(jīng)被監(jiān)聽了倒槐，現(xiàn)在值為：“' + newVal.toString() + '”');
            dep.notify(); // 如果數(shù)據(jù)變化，通知所有訂閱者
        }
    });
}
Dep.target = null;

到此為止附井，簡(jiǎn)單版的Watcher設(shè)計(jì)完畢讨越，這時(shí)候我們只要將Observer和Watcher關(guān)聯(lián)起來，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定數(shù)據(jù)了永毅。因?yàn)檫@里沒有還沒有設(shè)計(jì)解析器Compile把跨，所以對(duì)于模板數(shù)據(jù)我們都進(jìn)行寫死處理，假設(shè)模板上有一個(gè)節(jié)點(diǎn)沼死，且id號(hào)為'name'着逐，并且雙向綁定的綁定的變量也為'name'，且是通過兩個(gè)大雙括號(hào)包起來（這里只是為了演示意蛀，暫時(shí)沒什么用處）耸别，模板如下：

<body>
    <h1 id="name">{{name}}</h1>
</body>

這時(shí)候我們需要將Observer和Watcher關(guān)聯(lián)起來：

function SelfVue (data, el, exp) {
    this.data = data;
    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板數(shù)據(jù)的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;
}

然后在頁面上new以下SelfVue類，就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了：

<body>
    <h1 id="name">{{name}}</h1>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
    var ele = document.querySelector('#name');
    var selfVue = new SelfVue({
        name: 'hello world'
    }, ele, 'name');
 
    window.setTimeout(function () {
        console.log('name值改變了');
        selfVue.data.name = 'canfoo';
    }, 2000);
 
</script>

這時(shí)候打開頁面县钥，可以看到頁面剛開始顯示了是'hello world'秀姐，過了2s后就變成'canfoo'了。到這里若贮，總算大功告成一半了省有，但是還有一個(gè)細(xì)節(jié)問題，我們?cè)谫x值的時(shí)候是這樣的形式 ' selfVue.data.name = 'canfoo' ' 而我們理想的形式是' selfVue.name = 'canfoo' '為了實(shí)現(xiàn)這樣的形式谴麦，我們需要在new SelfVue的時(shí)候做一個(gè)代理處理蠢沿，讓訪問selfVue的屬性代理為訪問selfVue.data的屬性，實(shí)現(xiàn)原理還是使用Object.defineProperty( )對(duì)屬性值再包一層：

function SelfVue (data, el, exp) {
    var self = this;
    this.data = data;
 
    Object.keys(data).forEach(function(key) {
        self.proxyKeys(key);  // 綁定代理屬性
    });
 
    observe(data);
    el.innerHTML = this.data[exp];  // 初始化模板數(shù)據(jù)的值
    new Watcher(this, exp, function (value) {
        el.innerHTML = value;
    });
    return this;
}
 
SelfVue.prototype = {
    proxyKeys: function (key) {
        var self = this;
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
                return self.data[key];
            },
            set: function proxySetter(newVal) {
                self.data[key] = newVal;
            }
        });
    }
}

這下我們就可以直接通過' selfVue.name = 'canfoo' '的形式來進(jìn)行改變模板數(shù)據(jù)了匾效。如果想要迫切看到現(xiàn)象的童鞋趕快來獲取代碼舷蟀！

3.實(shí)現(xiàn)Compile

雖然上面已經(jīng)實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的例子，但是整個(gè)過程都沒有去解析dom節(jié)點(diǎn)，而是直接固定某個(gè)節(jié)點(diǎn)進(jìn)行替換數(shù)據(jù)的野宜，所以接下來需要實(shí)現(xiàn)一個(gè)解析器Compile來做解析和綁定工作碗殷。解析器Compile實(shí)現(xiàn)步驟：

1.解析模板指令，并替換模板數(shù)據(jù)速缨，初始化視圖
2.將模板指令對(duì)應(yīng)的節(jié)點(diǎn)綁定對(duì)應(yīng)的更新函數(shù)，初始化相應(yīng)的訂閱器

為了解析模板代乃，首先需要獲取到dom元素旬牲，然后對(duì)dom元素上含有指令的節(jié)點(diǎn)進(jìn)行處理，因此這個(gè)環(huán)節(jié)需要對(duì)dom操作比較頻繁搁吓，所以可以先建一個(gè)fragment片段原茅，將需要解析的dom節(jié)點(diǎn)存入fragment片段里再進(jìn)行處理：

function nodeToFragment (el) {
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while (child) {
        // 將Dom元素移入fragment中
        fragment.appendChild(child);
        child = el.firstChild
    }
    return fragment;
}

接下來需要遍歷各個(gè)節(jié)點(diǎn)，對(duì)含有相關(guān)指定的節(jié)點(diǎn)進(jìn)行特殊處理堕仔，這里咱們先處理最簡(jiǎn)單的情況擂橘，只對(duì)帶有 '{{變量}}' 這種形式的指令進(jìn)行處理，先簡(jiǎn)后難嘛摩骨，后面再考慮更多指令情況：

function compileElement (el) {
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
        var reg = /\{\{(.*)\}\}/;
        var text = node.textContent;
 
        if (self.isTextNode(node) && reg.test(text)) {  // 判斷是否是符合這種形式{{}}的指令
            self.compileText(node, reg.exec(text)[1]);
        }
 
        if (node.childNodes && node.childNodes.length) {
            self.compileElement(node);  // 繼續(xù)遞歸遍歷子節(jié)點(diǎn)
        }
    });
},
function compileText (node, exp) {
    var self = this;
    var initText = this.vm[exp];
    updateText(node, initText);  // 將初始化的數(shù)據(jù)初始化到視圖中
    new Watcher(this.vm, exp, function (value) {  // 生成訂閱器并綁定更新函數(shù)
        self.updateText(node, value);
    });
},
function updateText (node, value) {
    node.textContent = typeof value == 'undefined' ? '' : value;
}

獲取到最外層節(jié)點(diǎn)后通贞，調(diào)用compileElement函數(shù)，對(duì)所有子節(jié)點(diǎn)進(jìn)行判斷恼五，如果節(jié)點(diǎn)是文本節(jié)點(diǎn)且匹配{{}}這種形式指令的節(jié)點(diǎn)就開始進(jìn)行編譯處理昌罩，編譯處理首先需要初始化視圖數(shù)據(jù)，對(duì)應(yīng)上面所說的步驟1灾馒，接下去需要生成一個(gè)并綁定更新函數(shù)的訂閱器茎用，對(duì)應(yīng)上面所說的步驟2。這樣就完成指令的解析睬罗、初始化轨功、編譯三個(gè)過程，一個(gè)解析器Compile也就可以正常的工作了容达。為了將解析器Compile與監(jiān)聽器Observer和訂閱者Watcher關(guān)聯(lián)起來古涧，我們需要再修改一下類SelfVue函數(shù)：

function SelfVue (options) {
    var self = this;
    this.vm = this;
    this.data = options;
 
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);
    });
 
    observe(this.data);
    new Compile(options, this.vm);
    return this;
}

更改后，我們就不要像之前通過傳入固定的元素值進(jìn)行雙向綁定了花盐，可以隨便命名各種變量進(jìn)行雙向綁定了：

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <h1>{{name}}</h1>
    </div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
 
    var selfVue = new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: ''
        }
    });
 
    window.setTimeout(function () {
        selfVue.title = '你好';
    }, 2000);
 
    window.setTimeout(function () {
        selfVue.name = 'canfoo';
    }, 2500);
 
</script>

如上代碼蒿褂，在頁面上可觀察到，剛開始titile和name分別被初始化為 'hello world' 和空卒暂，2s后title被替換成 '你好' 3s后name被替換成 'canfoo' 了啄栓。廢話不多說，再給你們來一個(gè)這個(gè)版本的代碼（v2）也祠，獲取代碼昙楚！

到這里，一個(gè)數(shù)據(jù)雙向綁定功能已經(jīng)基本完成了诈嘿，接下去就是需要完善更多指令的解析編譯堪旧，在哪里進(jìn)行更多指令的處理呢削葱？答案很明顯，只要在上文說的compileElement函數(shù)加上對(duì)其他指令節(jié)點(diǎn)進(jìn)行判斷淳梦，然后遍歷其所有屬性析砸，看是否有匹配的指令的屬性，如果有的話爆袍，就對(duì)其進(jìn)行解析編譯首繁。這里我們?cè)偬砑右粋€(gè)v-model指令和事件指令的解析編譯，對(duì)于這些節(jié)點(diǎn)我們使用函數(shù)compile進(jìn)行解析處理：

function compile (node) {
    var nodeAttrs = node.attributes;
    var self = this;
    Array.prototype.forEach.call(nodeAttrs, function(attr) {
        var attrName = attr.name;
        if (self.isDirective(attrName)) {
            var exp = attr.value;
            var dir = attrName.substring(2);
            if (self.isEventDirective(dir)) {  // 事件指令
                self.compileEvent(node, self.vm, exp, dir);
            } else {  // v-model 指令
                self.compileModel(node, self.vm, exp, dir);
            }
            node.removeAttribute(attrName);
        }
    });
}

上面的compile函數(shù)是掛載Compile原型上的陨囊，它首先遍歷所有節(jié)點(diǎn)屬性弦疮，然后再判斷屬性是否是指令屬性，如果是的話再區(qū)分是哪種指令蜘醋，再進(jìn)行相應(yīng)的處理胁塞，處理方法相對(duì)來說比較簡(jiǎn)單，這里就不再列出來压语，想要馬上看閱讀代碼的同學(xué)可以馬上點(diǎn)擊這里獲取啸罢。

最后我們?cè)谏晕⒏脑煜骂怱elfVue，使它更像vue的用法：

function SelfVue (options) {
    var self = this;
    this.data = options.data;
    this.methods = options.methods;
 
    Object.keys(this.data).forEach(function(key) {
        self.proxyKeys(key);
    });
 
    observe(this.data);
    new Compile(options.el, this);
    options.mounted.call(this); // 所有事情處理好后執(zhí)行mounted函數(shù)
}

這時(shí)候我們可以來真正測(cè)試了胎食，在頁面上設(shè)置如下東西：

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <input v-model="name">
        <h1>{{name}}</h1>
        <button v-on:click="clickMe">click me!</button>
    </div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
 
     new SelfVue({
        el: '#app',
        data: {
            title: 'hello world',
            name: 'canfoo'
        },
        methods: {
            clickMe: function () {
                this.title = 'hello world';
            }
        },
        mounted: function () {
            window.setTimeout(() => {
                this.title = '你好';
            }, 1000);
        }
    });
 
</script>

是不是看起來跟vue的使用方法一樣伺糠，哈，真正的大功告成斥季！想要代碼训桶，直接點(diǎn)擊這里獲取酣倾！

原文