Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式，具體內(nèi)容如下
Vue是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的呢？答案是前端數(shù)據(jù)劫持。其通過(guò)Object.defineProperty()方法，這個(gè)方法可以設(shè)置getter和setter函數(shù)，在setter函數(shù)中，就可以監(jiān)聽(tīng)到數(shù)據(jù)的變化，從而更新綁定的元素的值。
實(shí)現(xiàn)對(duì)象屬性變化綁定到UI
大概的思路是：
1. 確定綁定的數(shù)據(jù)，使用Object.defineProperty()對(duì)其數(shù)據(jù)變化進(jìn)行監(jiān)聽(tīng)（對(duì)應(yīng)defineGetAndSet）
2. 一旦數(shù)據(jù)發(fā)生改動(dòng)，會(huì)觸發(fā)setter函數(shù)。因此在setter函數(shù)內(nèi)要調(diào)用回調(diào)函數(shù)觸發(fā)綁定元素的更新。
3. 綁定元素的更新就是遍歷所有的綁定元素，通過(guò)綁定屬性的值確定函數(shù)的調(diào)用，并傳入修改后的值。（對(duì)應(yīng)scan）
實(shí)現(xiàn)UI變化綁定到對(duì)象屬性
這個(gè)就比較簡(jiǎn)單了，因?yàn)閁I的改變會(huì)觸發(fā)一些事件，比如keyup。通過(guò)監(jiān)聽(tīng)事件來(lái)實(shí)現(xiàn)數(shù)據(jù)的改變。而上面說(shuō)了，數(shù)據(jù)的改變又會(huì)導(dǎo)致綁定其值的元素的UI改變。
實(shí)現(xiàn)
var data = {
value: 'hello world!'
}
var bindValue;
//確定綁定的元素
var bindelems = [document.getElementById('p'), document.getElementById('input')];
//修改綁定元素的值的方法
var command = {
text: function(str) {
this.innerHTML = str;
},
value: function(str) {
this.value = str;
}
};
//遍歷綁定元素修改其值
var scan = function() {
console.log('in scan');
for(var i = 0; i < bindelems.length; i++) {
var elem = bindelems[i];
console.log('elem',elem);
for(var j = 0; j < elem.attributes.length; j++) {
var attr = elem.attributes[j];
if(attr.nodeName.indexOf('q-')>=0) {
command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]);
}
}
}
}
//設(shè)置劫持
var defineGetAndSet = function(obj, propname) {
Object.defineProperty(obj, propname, {
get: function() {
return bindValue;
},
set: function(value){
bindValue = value;
scan();
},
enumerable: true,
configurable: true
})
}
//一開(kāi)始先初始化，使所有綁定的元素值為初始值
scan();
//設(shè)置需要被劫持的元素
defineGetAndSet(data, 'value');
//監(jiān)聽(tīng)UI變化
bindelems[1].addEventListener('keyup', function(e) {
data.value = e.target.value;
});
setTimeout(function() {
data.value = 'change';
}, 1000);
參考：
javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解Vue雙向數(shù)據(jù)綁定原理解析
- 輕松理解vue的雙向數(shù)據(jù)綁定問(wèn)題
- vue雙向數(shù)據(jù)綁定原理探究(附demo)
- Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)
- 使用Vue如何寫(xiě)一個(gè)雙向數(shù)據(jù)綁定(面試常見(jiàn))
- 通過(guò)源碼分析Vue的雙向數(shù)據(jù)綁定詳解
- vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
- vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
- vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽(tīng)器的實(shí)現(xiàn)方法
- vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
相關(guān)文章
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場(chǎng)景是簡(jiǎn)單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。下面這篇文章主要給大家介紹了Vue.js中的計(jì)算屬性,需要的朋友可以參考借鑒，一起來(lái)看看吧。2017-01-01
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
前端vue按1920*1080設(shè)計(jì)圖的頁(yè)面適配屏幕縮放并適配4K屏詳解
最近在做一個(gè)數(shù)據(jù)可視化的項(xiàng)目,整個(gè)項(xiàng)目全是大屏展示,期間也是遇到很多問(wèn)題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計(jì)圖的頁(yè)面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下2006-06-06
這篇文章主要介紹了Vue 2.0 基礎(chǔ)，具體內(nèi)容有、基本語(yǔ)法、生命周期、路由管理Vue-Router、狀態(tài)管理Vuex、Http請(qǐng)求庫(kù)Axios，想詳細(xì)了解的小伙伴請(qǐng)和現(xiàn)編一起學(xué)習(xí)下面文章內(nèi)容吧2021-10-10
在Vue中有多種方式可以進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要給大家介紹了關(guān)于vue路由三種傳參方式的相關(guān)資料,文中介紹的方法分別包括params傳參、query傳參(顯示傳參)以及props傳參(路由組件傳參),,需要的朋友可以參考下2023-10-10
基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式
在看element-ui的源碼的時(shí)候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下2021-05-05