Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)
我在整理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è)新值和舊值有沒有變化,這種方式就要定時(shí)監(jiān)測(cè)了咯.兩種性能的消耗感覺不在一個(gè)層次上的啊.
就好比用html5 Sockets做后臺(tái)主動(dòng)消息推送前端和用js定時(shí)器每個(gè)5秒發(fā)送請(qǐng)求到后臺(tái)捕獲消息的性能差距一樣.
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)站的支持!
- vue.js數(shù)據(jù)綁定的方法(單向、雙向和一次性綁定)
- 淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
- Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)
- 簡(jiǎn)單談?wù)刅ue 模板各類數(shù)據(jù)綁定
- vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
- vue.js數(shù)據(jù)綁定操作詳解
- vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
- Vue.js數(shù)據(jù)綁定之data屬性
- vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定
- vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
相關(guān)文章
使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡(jiǎn)單,但是vue3中略微有些改變,通過(guò)本文講解下他的改變,對(duì)vue3?watch監(jiān)聽router相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11vue中的計(jì)算屬性的使用和vue實(shí)例的方法示例
本篇文章主要介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問(wèn)題
這篇文章主要介紹了ant design Vue 純前端實(shí)現(xiàn)分頁(yè)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04antd配置config-overrides.js文件的操作
這篇文章主要介紹了antd配置config-overrides.js文件的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10