快捷導(dǎo)航

Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)

更新時(shí)間：2016年11月22日 14:09:35 作者：核桃大號(hào)

這篇文章主要介紹了Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧

我在整理javascript高級(jí)程序設(shè)計(jì)的筆記的時(shí)候看到面向?qū)ο笤O(shè)計(jì)那章,講到對(duì)象屬性分為數(shù)據(jù)屬性和訪問(wèn)器屬性,我們平時(shí)用的js對(duì)象90%以上都只是用到數(shù)據(jù)屬性;我們向來(lái)講解下數(shù)據(jù)屬性和訪問(wèn)器屬性到底是什么?

數(shù)據(jù)屬性:數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置,在這個(gè)位置可以讀取和寫入值.

訪問(wèn)器屬性:訪問(wèn)器屬性不包含數(shù)據(jù)值;他們包含一對(duì)getter和setter函數(shù)在讀取訪問(wèn)器屬性時(shí),會(huì)調(diào)用getter函數(shù),這個(gè)函數(shù)負(fù)責(zé)返回有效的值,在寫入訪問(wèn)器屬性時(shí),會(huì)調(diào)用setter函數(shù)并傳入新值.

這里介紹的重點(diǎn)是訪問(wèn)器屬性,設(shè)置對(duì)象的訪問(wèn)器屬性只能用es5的Object.defineProrerty()方法,如下例子:

var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function () {
return this._year
},
set:function (newValue) {
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.edition);//2
console.log(book.year);//2005

也就是當(dāng)執(zhí)行book.year=2005的時(shí)候其實(shí)是執(zhí)行了year中的set方法,當(dāng)執(zhí)行book.year的時(shí)候執(zhí)行了year的get方法;

var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function () {
console.log("year get")
return this._year
},
set:function (newValue) {
console.log("year set")
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.year);

控制臺(tái)的提示是:

這個(gè)原理就是vue雙向數(shù)據(jù)綁定的原理,我們?cè)趘ue組件中的data聲明屬性數(shù)據(jù)的時(shí)候其實(shí)在對(duì)象中的已經(jīng)將這個(gè)屬性封裝成了訪問(wèn)器屬性.

每個(gè)屬性都有g(shù)et和set方法,在做雙向的數(shù)據(jù)的控制都在get和set方法中,因?yàn)闊o(wú)論你是在ready(2.0是mounted了)或是在view中改變值都會(huì)觸發(fā)set方法,將新值復(fù)制進(jìn)去,在重新在view中匹配值,當(dāng)然你們有更復(fù)雜的控制操作,get方法著是讓ready中獲取的這個(gè)屬性值一直保存最新值.

angular1的雙向數(shù)據(jù)綁定是臟數(shù)據(jù)監(jiān)測(cè),簡(jiǎn)單點(diǎn)說(shuō)就是監(jiān)測(cè)新值和舊值有沒(méi)有變化,這種方式就要定時(shí)監(jiān)測(cè)了咯.兩種性能的消耗感覺(jué)不在一個(gè)層次上的啊.

就好比用html5 Sockets做后臺(tái)主動(dòng)消息推送前端和用js定時(shí)器每個(gè)5秒發(fā)送請(qǐng)求到后臺(tái)捕獲消息的性能差距一樣.

還有之前寫的js面向?qū)ο蠓謱拥乃枷?/a>其實(shí)也可以用在vue項(xiàng)目中,以前我一直以為vue的data層其實(shí)就是個(gè)擺設(shè),但在api發(fā)現(xiàn)computed屬性之后data層完全可以實(shí)現(xiàn)發(fā)送ajax取數(shù)功能,沒(méi)必要在全都放到ready(2.0是mounted了)里面,這個(gè)ready(2.0是mounted了)可以只負(fù)責(zé)數(shù)據(jù)格式出來(lái),或者控制頁(yè)面的動(dòng)態(tài)效果而已.這js的結(jié)構(gòu)就像后臺(tái)MVC那樣層次功能分明清晰.這也只是我突然想到的思路還沒(méi)真正應(yīng)用到實(shí)際項(xiàng)目中,只是給在用vue的朋友提供個(gè)思路.

import data from '../assets/js/data'
export default{
data(){
return{
menu:data.menu,
inde:"",
row:"",
clomu:""
}
},
computed:{
isfull:function () {
alert(111);
return 11;
}
},
mounted(){
},
methods:{
domclick:function (i) {
if(this.inde===i){
this.inde="";
}else {
this.inde = i;
}
},
subclick:function (i,o) {
this.row=i;
this.clomu=o;
}
}
}

以上所述是小編給大家介紹的Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！