詳解vue的雙向綁定原理及實(shí)現(xiàn)
前言
10多年的渝中網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整渝中建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“渝中網(wǎng)站設(shè)計(jì)”,“渝中網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
使用vue也好有一段時(shí)間了，雖然對(duì)其雙向綁定原理也有了解個(gè)大概，但也沒(méi)好好探究下其原理實(shí)現(xiàn)，所以這次特意花了幾晚時(shí)間查閱資料和閱讀相關(guān)源碼，自己也實(shí)現(xiàn)一個(gè)簡(jiǎn)單版vue的雙向綁定版本，先上個(gè)成果圖來(lái)吸引各位：
代碼： 效果圖：
是不是看起來(lái)跟vue的使用方式差不多？接下來(lái)就來(lái)從原理到實(shí)現(xiàn)，從簡(jiǎn)到難一步一步來(lái)實(shí)現(xiàn)這個(gè)SelfVue。由于本文只是為了學(xué)習(xí)和分享，所以只是簡(jiǎn)單實(shí)現(xiàn)下原理，并沒(méi)有考慮太多情況和設(shè)計(jì)，如果大家有什么建議，歡迎提出來(lái)。
本文主要介紹兩大內(nèi)容：
1. vue數(shù)據(jù)雙向綁定的原理。
2. 實(shí)現(xiàn)簡(jiǎn)單版vue的過(guò)程，主要實(shí)現(xiàn){{}}、v-model和事件指令的功能。
相關(guān)代碼地址：https://github.com/canfoo/self-vue
vue數(shù)據(jù)雙向綁定原理
vue數(shù)據(jù)雙向綁定是通過(guò)數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的，那么vue是如果進(jìn)行數(shù)據(jù)劫持的，我們可以先來(lái)看一下通過(guò)控制臺(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是通過(guò)Object.defineProperty()來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持的。
Object.defineProperty( )是用來(lái)做什么的？它可以來(lái)控制一個(gè)對(duì)象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來(lái)研究下它對(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)，那要怎么處理呢？或者說(shuō)要通過(guò)什么監(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)威指南》我們通過(guò)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è)語(yǔ)句時(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í)行下下面的語(yǔ)句，控制臺(tái)會(huì)輸出什么？
console.log(Book);
結(jié)果：
乍一看，是不是跟我們?cè)谏厦娲蛴ue數(shù)據(jù)長(zhǎng)得有點(diǎn)類似，說(shuō)明vue確實(shí)是通過(guò)這種方法來(lái)進(jìn)行數(shù)據(jù)劫持的。接下來(lái)我們通過(guò)其原理來(lái)實(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í)可以通過(guò)事件監(jiān)聽即可，比如input標(biāo)簽監(jiān)聽 'input' 事件就可以實(shí)現(xiàn)了。所以我們著重來(lái)分析下，當(dāng)數(shù)據(jù)改變，如何更新視圖的。
數(shù)據(jù)更新視圖的重點(diǎn)是如何知道數(shù)據(jù)變了，只要知道數(shù)據(jù)變了，那么接下去的事都好處理。如何知道數(shù)據(jù)變了，其實(shí)上文我們已經(jīng)給出答案了，就是通過(guò)Object.defineProperty( )對(duì)屬性設(shè)置一個(gè)set函數(shù)，當(dāng)數(shù)據(jù)改變了就會(huì)來(lái)觸發(fā)這個(gè)函數(shù)，所以我們只要將一些需要更新的方法放在這里面就可以實(shí)現(xiàn)data更新view了。
思路有了，接下去就是實(shí)現(xiàn)過(guò)程了。
實(shí)現(xiàn)過(guò)程
我們已經(jīng)知道實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽，所以我們需要設(shè)置一個(gè)監(jiān)聽器Observer，用來(lái)監(jiān)聽所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來(lái)專門收集這些訂閱者，然后在監(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，用來(lái)劫持并監(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)核心方法就是前文所說(shuō)的Object.defineProperty( )。如果要對(duì)所有屬性都進(jìn)行監(jiān)聽的話，那么可以通過(guò)遞歸方法遍歷所有屬性值，并對(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 = '沒(méi)有此書籍'; // 屬性book2已經(jīng)被監(jiān)聽了，現(xiàn)在值為：“沒(méi)有此書籍”思路分析中，需要?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ì)說(shuō)明的。在setter函數(shù)里面，如果數(shù)據(jù)變化，就會(huì)去通知所有訂閱者，訂閱者們就會(huì)去執(zhí)行對(duì)應(yīng)的更新的函數(shù)。到此為止，一個(gè)比較完整Observer已經(jīng)實(shí)現(xiàn)了，接下來(lái)我們開始設(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)單不過(guò)了，只要獲取對(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)起來(lái)，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙向綁定數(shù)據(jù)了。因?yàn)檫@里沒(méi)有還沒(méi)有設(shè)計(jì)解析器Compile，所以對(duì)于模板數(shù)據(jù)我們都進(jìn)行寫死處理，假設(shè)模板上又一個(gè)節(jié)點(diǎn)，且id號(hào)為'name'，并且雙向綁定的綁定的變量也為'name'，且是通過(guò)兩個(gè)大雙括號(hào)包起來(lái)（這里只是為了掩飾，暫時(shí)沒(méi)什么用處），模板如下：
<body>
<h2 id="name">{{name}}</h2>
</body>
這時(shí)候我們需要將Observer和Watcher關(guān)聯(lián)起來(lái)：
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;
}然后在頁(yè)面上new以下SelfVue類，就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了：
<body>
<h2 id="name">{{name}}</h2>
</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í)候打開頁(yè)面，可以看到頁(yè)面剛開始顯示了是'hello world'，過(guò)了2s后就變成'canfoo'了。到這里，總算大功告成一半了，但是還有一個(gè)細(xì)節(jié)問(wèn)題，我們?cè)谫x值的時(shí)候是這樣的形式 ' selfVue.data.name = 'canfoo' ' 而我們理想的形式是' selfVue.name = 'canfoo' '為了實(shí)現(xiàn)這樣的形式，我們需要在new SelfVue的時(shí)候做一個(gè)代理處理，讓訪問(wèn)selfVue的屬性代理為訪問(wèn)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;
}
});
}
}這下我們就可以直接通過(guò)' selfVue.name = 'canfoo' '的形式來(lái)進(jìn)行改變模板數(shù)據(jù)了。如果想要迫切看到現(xiàn)象的童鞋趕快來(lái)獲取代碼！
3.實(shí)現(xiàn)Compile
雖然上面已經(jīng)實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的例子，但是整個(gè)過(guò)程都沒(méi)有去解析dom節(jié)點(diǎn)，而是直接固定某個(gè)節(jié)點(diǎn)進(jìn)行替換數(shù)據(jù)的，所以接下來(lái)需要實(shí)現(xiàn)一個(gè)解析器Compile來(lái)做解析和綁定工作。解析器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;
}接下來(lái)需要遍歷各個(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];
this.updateText(node, initText); // 將初始化的數(shù)據(jù)初始化到視圖中
new Watcher(this.vm, exp, function (value) { // 生成訂閱器并綁定更新函數(shù)
self.updateText(node, value);
});
},
function (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)上面所說(shuō)的步驟1，接下去需要生成一個(gè)并綁定更新函數(shù)的訂閱器，對(duì)應(yīng)上面所說(shuō)的步驟2。這樣就完成指令的解析、初始化、編譯三個(gè)過(guò)程，一個(gè)解析器Compile也就可以正常的工作了。為了將解析器Compile與監(jiān)聽器Observer和訂閱者Watcher關(guān)聯(lián)起來(lái)，我們需要再修改一下類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;
}更改后，我們就不要像之前通過(guò)傳入固定的元素值進(jìn)行雙向綁定了，可以隨便命名各種變量進(jìn)行雙向綁定了：
<body>
<div id="app">
<h3>{{title}}</h3>
<h2>{{name}}</h2>
</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>如上代碼，在頁(yè)面上可觀察到，剛開始titile和name分別被初始化為 'hello world' 和空，2s后title被替換成 '你好' 3s后name被替換成 'canfoo' 了。廢話不多說(shuō)，再給你們來(lái)一個(gè)這個(gè)版本的代碼（v2），獲取代碼！
到這里，一個(gè)數(shù)據(jù)雙向綁定功能已經(jīng)基本完成了，接下去就是需要完善更多指令的解析編譯，在哪里進(jìn)行更多指令的處理呢？答案很明顯，只要在上文說(shuō)的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ì)來(lái)說(shuō)比較簡(jiǎn)單，這里就不再列出來(lái)，想要馬上看閱讀代碼的同學(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í)候我們可以來(lái)真正測(cè)試了，在頁(yè)面上設(shè)置如下東西：
<body>
<div id="app">
<h3>{{title}}</h3>
<input v-model="name">
<h2>{{name}}</h2>
<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>是不是看起來(lái)跟vue的使用方法一樣，哈，真正的大功告成！想要代碼，直接點(diǎn)擊這里獲?。‖F(xiàn)象還沒(méi)描述？直接上圖！??！請(qǐng)觀賞
其實(shí)這個(gè)效果圖，就是本文開頭貼出來(lái)的效果圖了，前文說(shuō)著要帶著大家實(shí)現(xiàn)，所以就在這里把圖再貼一次了，這叫首尾呼應(yīng)嘛。
最后希望本文對(duì)你有幫助，如果有問(wèn)題請(qǐng)留言一起探討。
以上所述是小編給大家介紹的vue雙向綁定原理及實(shí)現(xiàn)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
當(dāng)前文章：詳解vue的雙向綁定原理及實(shí)現(xiàn)
分享路徑：http://aaarwkj.com/article6/goocog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、ChatGPT、企業(yè)建站、微信公眾號(hào)、網(wǎng)站內(nèi)鏈、電子商務(wù)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 服務(wù)器之家淺談高防秒解服務(wù)器托管要多少錢？ 2022-10-04
- Windows服務(wù)器解決“遠(yuǎn)程桌面連接:出現(xiàn)身份驗(yàn)證錯(cuò)誤,要求的函數(shù)不受支持 2023-05-04
- 外國(guó)服務(wù)器托管網(wǎng)站打開慢的原因分析 2022-10-05
- 服務(wù)器托管與虛擬主機(jī)租用有什么區(qū)別？ 2022-06-19
- 服務(wù)器托管與租用怎么選擇 2021-03-04
- 什么是服務(wù)器托管和服務(wù)器租用？ 2021-02-15
- 服務(wù)器托管常見(jiàn)故障有哪些？托管服務(wù)器出現(xiàn)故障如何處理？ 2022-10-03
- 服務(wù)器托管是什么？為什么要托管？ 2022-10-03
- 哪家四川服務(wù)器托管便宜？成都托管服務(wù)器費(fèi)用每年要多少錢？ 2023-02-02
- 為何廣州服務(wù)器托管/租用選擇創(chuàng)新互聯(lián) 2021-03-11
- 服務(wù)器托管國(guó)內(nèi)哪些機(jī)房比較好？ 2022-10-11
- 撥開服務(wù)器的外衣，看服務(wù)器托管什么意思 2021-03-16