溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近看到有些人說vue是雙向數據綁定的，有些人說vue是單向數據流的，我認為這兩種說法都是錯誤的，vue是一款具有響應式更新機制的框架，既可以實現單向數據流也可以實現數據的雙向綁定。
2 單向數據流與數據雙向綁定
單向數據流是指model中的數據發生改變時引起view的改變。
雙向數據綁定是指model中的數據發生改變時view的改變，view的改變也會引起model的改變。
//這個是單向數據流，改變這個input的value值并不能是data中的text屬性發生改變。
<input type="text" :value="text">
data:{
return {
text:'文本輸入框'
}
}
//這個是雙向數據綁定，無論是修改model還是修改view都能引起另一方的改變。
<input type="text" v-model="text">
data:{
return {
text:'文本輸入框'
}
}
3 vue中的數據雙向綁定實現原理
vue給我們提供了實現數據雙向綁定的兩種語法糖，分別v-model和.sync修飾符，v-model用于為表單元素提供數據雙向綁定，.sync修飾符用于為任意屬性提供數據雙向綁定，接下來我們來嘗試不使用vue提供的語法糖，自己實現數據雙向綁定。
要想view發生改變的時候引起model的改變首先要監聽到view的改變，view發生改變時再去改變model，有了思路之后下面是代碼實現。
//首先通過input事件監聽視圖的改變
<input type="text" :value="inputTitle" @input="onInput">
data:{
return {
text:'文本輸入框'
}
},
methods:{
//視圖發生改變的時候，將視圖的值賦予模型的值，實現數據雙向綁定
onInput(event) {
this.text=event.target.value;
}
}
4 vue中的單向數據流實現原理
vue的單向數據流涉及到
Object.defineProperty()這個API。Object.defineProperty用法:
//Object.defineProperty用于數據劫持，可以監聽一個變量的讀取與寫入，并在發生讀取與寫入的時候執行回調函數
Object.defineProperty(obj,prop,desc);
//obj是要定義的對象，prop是要定義的屬性名，desc是屬性的描述符
舉例：
//定義一個對象并監聽他的text屬性的存值操作與取值操作
let data={};
Object.defineProperty(data,'text',{
get() {
console.log('取值操作');
},
set(newVal) {
console.log('存值操作');
}
});
console.log('data');
===>輸出:
===>{}
===>取值操作
data.text='文本輸入框';
===>輸出
===>存值操作
有了Object.defineProperty()這個API就可以監聽model中數據的改變并在數據改變的時候修改視圖達到單向數據流的效果。
5 實現一個簡易的數據雙向綁定
下面實現一個簡易的數據雙向綁定，目標是在修改view可以使model中的變量發生改變，修改model可以使視圖發生改變。
//html
<div id="app">
<input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定義model
let data={
text:''
};
//監聽model中text的變化，首先實現數據單向流
Object.defineProperty(data,text,{
get() {
}，
//text發生改變的時候，修改input元素的value值
set(newVal) {
input.value=newVal;
}
});
//監聽input元素的改變并修改model的值，實現數據雙向綁定
input.addEventLisener('input',event=> {
data.text=event.target.value;
});
至此就實現了簡易的數據雙向綁定，可以在控制臺中修改data.text的值來查看視圖是否發生改變，修改input元素的值在控制臺中打印data.text查看model是否發生改變。
總結
以上所述是小編給大家介紹的vue響應式更新機制及不使用框架實現簡單的數據雙向綁定問題 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
