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