vue中數(shù)據(jù)雙向綁定的原理是什么，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
前端的數(shù)據(jù)雙向綁定指的是view（視圖）和model（數(shù)據(jù)）兩者之間的關(guān)系；view層是頁面上展示給用戶看的信息，model層一般是指通過http請求從后臺(tái)返回的數(shù)據(jù)。view到model的綁定都是通過事件回調(diào)函數(shù)操作的，model到view的綁定有多種方法。
angular，react，vue等mv*模式的框架都實(shí)現(xiàn)了數(shù)據(jù)雙向綁定；angular是通過臟檢查即新老數(shù)據(jù)的比較來確定哪些數(shù)據(jù)發(fā)生了變化，從而將它更新到view中；vue則是通過設(shè)置數(shù)據(jù)的get和set函數(shù)來實(shí)現(xiàn)的，這種方式在性能上是優(yōu)于angular的。
下面代碼是一個(gè)簡單的定義數(shù)據(jù)get和set方法的例子，set和get方法分別在數(shù)據(jù)改變和訪問的時(shí)候被調(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è)置了新值18Object.defineProperty，這是ES6新增的方法，通過這個(gè)方法，可以自定義getter和setter函數(shù)。
上面的代碼只是個(gè)簡單的例子，并沒有處理數(shù)組的情況；不過這是vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定的核心。
關(guān)于vue中數(shù)據(jù)雙向綁定的原理是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
