vue數(shù)據(jù)雙向綁定原理解析（get & set)
前端的數(shù)據(jù)雙向綁定指的是view（視圖）和model（數(shù)據(jù)）兩者之間的關(guān)系；view層是頁(yè)面上展示給用戶看的信息，model層一般是指通過(guò)http請(qǐng)求從后臺(tái)返回的數(shù)據(jù)。view到model的綁定都是通過(guò)事件回調(diào)函數(shù)操作的，model到view的綁定有多種方法。
angular，react，vue等mv*模式的框架都實(shí)現(xiàn)了數(shù)據(jù)雙向綁定；angular是通過(guò)臟檢查即新老數(shù)據(jù)的比較來(lái)確定哪些數(shù)據(jù)發(fā)生了變化，從而將它更新到view中；vue則是通過(guò)設(shè)置數(shù)據(jù)的get和set函數(shù)來(lái)實(shí)現(xiàn)的，這種方式在性能上是優(yōu)于angular的。
下面代碼是一個(gè)簡(jiǎn)單的定義數(shù)據(jù)get和set方法的例子，set和get方法分別在數(shù)據(jù)改變和訪問(wèn)的時(shí)候被調(diào)用，能夠監(jiān)聽(tīng)數(shù)據(jù)的變化：
// 數(shù)據(jù)綁定的構(gòu)造函數(shù)
function Observer(data) {
this.data = data;
for(var key in data) {
if(data.hasOwnProperty(key)) {
var val = data[key];
if(typeof data[key] === "object"){
// 如果值不為原始類型，則繼續(xù)遞歸
new Observer(val);
}else {
this.convert(key, val);
}
}
}
}
// 定義set 和 get函數(shù)
Observer.prototype.convert = function(key, val) {
Object.defineProperty(this.data, key, {
enumerable: true,
confingurable: true,
get: function() {
console.log(key + "被訪問(wèn)了");
return val;
},
set: function(newVal) {
console.log(key + "被設(shè)置了新值" + newVal);
val = newVal;
}
});
}
var app = new Observer({name: "xieshuai", age: 24, address: {city: "shenzheng"}});
app.data.name; // name被訪問(wèn)了
app.data.age = 18; // age被設(shè)置了新值18
Object.defineProperty，這是ES6新增的方法，通過(guò)這個(gè)方法，可以自定義getter和setter函數(shù)。
上面的代碼只是個(gè)簡(jiǎn)單的例子，并沒(méi)有處理數(shù)組的情況；不過(guò)這是vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的核心。
本文到此結(jié)束，文中若有不對(duì)之處，還望指正。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0中ref與reactive的區(qū)別及使用場(chǎng)景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下2023-08-08
由于涉及到vue框架單網(wǎng)頁(yè)應(yīng)用首屏加載慢這個(gè)問(wèn)題,我們需盡量減少加載負(fù)擔(dān),故采用按需引入的方式,只引入項(xiàng)目中用到的組件,這篇文章主要給大家介紹了關(guān)于Vue3按需引入Element?Plus以及定制主題色的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue踩坑記之npm?install報(bào)錯(cuò)問(wèn)題解決總結(jié)
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報(bào)錯(cuò)問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
electron?vue?模仿qq登錄界面功能實(shí)現(xiàn)
這篇文章主要介紹了electron?vue?模仿qq登錄界面,首先使用vuecli創(chuàng)建vue項(xiàng)目，安裝electron，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue父子組件傳值問(wèn)題，文章中有詳細(xì)的示例代碼，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了詳解Vue路由自動(dòng)注入實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
一文詳細(xì)了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開(kāi)發(fā)者提供了更多靈活性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
Vue axios庫(kù)避免重復(fù)發(fā)送請(qǐng)求的示例介紹
Axios是一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫(kù)之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題及解決方案
這篇文章主要介紹了vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vant是一個(gè)強(qiáng)大的移動(dòng)端組件庫(kù),目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對(duì)大家有所幫助2023-10-10