Vue實現(xiàn)雙向數(shù)據(jù)綁定

更新時間：2017年05月03日 14:02:02 作者：Front_end_lh

這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue實現(xiàn)雙向數(shù)據(jù)綁定的方式，具體內(nèi)容如下

Vue是如何實現(xiàn)雙向數(shù)據(jù)綁定的呢？答案是前端數(shù)據(jù)劫持。其通過Object.defineProperty()方法，這個方法可以設(shè)置getter和setter函數(shù)，在setter函數(shù)中，就可以監(jiān)聽到數(shù)據(jù)的變化，從而更新綁定的元素的值。

實現(xiàn)對象屬性變化綁定到UI

大概的思路是：

1. 確定綁定的數(shù)據(jù)，使用Object.defineProperty()對其數(shù)據(jù)變化進(jìn)行監(jiān)聽（對應(yīng)defineGetAndSet）
2. 一旦數(shù)據(jù)發(fā)生改動，會觸發(fā)setter函數(shù)。因此在setter函數(shù)內(nèi)要調(diào)用回調(diào)函數(shù)觸發(fā)綁定元素的更新。
3. 綁定元素的更新就是遍歷所有的綁定元素，通過綁定屬性的值確定函數(shù)的調(diào)用，并傳入修改后的值。（對應(yīng)scan）

實現(xiàn)UI變化綁定到對象屬性

這個就比較簡單了，因為UI的改變會觸發(fā)一些事件，比如keyup。通過監(jiān)聽事件來實現(xiàn)數(shù)據(jù)的改變。而上面說了，數(shù)據(jù)的改變又會導(dǎo)致綁定其值的元素的UI改變。

實現(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
 })
} 
//一開始先初始化，使所有綁定的元素值為初始值
scan();
//設(shè)置需要被劫持的元素
defineGetAndSet(data, 'value');
//監(jiān)聽UI變化
bindelems[1].addEventListener('keyup', function(e) {
 data.value = e.target.value;
});
setTimeout(function() {
 data.value = 'change';
}, 1000);

參考：

javascript實現(xiàn)數(shù)據(jù)雙向綁定的三種方式

剖析Vue原理&實現(xiàn)雙向綁定MVVM

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js學(xué)習(xí)之計算屬性
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計算屬性。下面這篇文章主要給大家介紹了Vue.js中的計算屬性,需要的朋友可以參考借鑒，一起來看看吧。
2017-01-01
vue自定義指令directive的使用方法
這篇文章主要介紹了vue自定義指令directive的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue修改Element的el-table樣式的4種方法
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-09-09
前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個數(shù)據(jù)可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue使用codemirror的兩種用法
這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-08-08
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下
2006-06-06
Vue 2.0 基礎(chǔ)詳細(xì)
這篇文章主要介紹了Vue 2.0 基礎(chǔ)，具體內(nèi)容有、基本語法、生命周期、路由管理Vue-Router、狀態(tài)管理Vuex、Http請求庫Axios，想詳細(xì)了解的小伙伴請和現(xiàn)編一起學(xué)習(xí)下面文章內(nèi)容吧
2021-10-10
vue路由三種傳參方式詳細(xì)講解
在Vue中有多種方式可以進(jìn)行路由跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要給大家介紹了關(guān)于vue路由三種傳參方式的相關(guān)資料,文中介紹的方法分別包括params傳參、query傳參(顯示傳參)以及props傳參(路由組件傳參),,需要的朋友可以參考下
2023-10-10
基于ElementUI中Table嵌套實現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實現(xiàn)多選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue2實現(xiàn)provide inject傳遞響應(yīng)式
在看element-ui的源碼的時候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下
2021-05-05