vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題

最近看到有些人說vue是雙向數(shù)據(jù)綁定的，有些人說vue是單向數(shù)據(jù)流的，我認(rèn)為這兩種說法都是錯誤的，vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實現(xiàn)單向數(shù)據(jù)流也可以實現(xiàn)數(shù)據(jù)的雙向綁定。

2 單向數(shù)據(jù)流與數(shù)據(jù)雙向綁定

單向數(shù)據(jù)流是指model中的數(shù)據(jù)發(fā)生改變時引起view的改變。

雙向數(shù)據(jù)綁定是指model中的數(shù)據(jù)發(fā)生改變時view的改變，view的改變也會引起model的改變。

//這個是單向數(shù)據(jù)流，改變這個input的value值并不能是data中的text屬性發(fā)生改變。
<input type="text" :value="text">
data:{
  return {
    text:'文本輸入框'
  }
}
//這個是雙向數(shù)據(jù)綁定，無論是修改model還是修改view都能引起另一方的改變。
<input type="text" v-model="text">
data:{
  return {
    text:'文本輸入框'
  }
}

3 vue中的數(shù)據(jù)雙向綁定實現(xiàn)原理

vue給我們提供了實現(xiàn)數(shù)據(jù)雙向綁定的兩種語法糖，分別v-model和.sync修飾符，v-model用于為表單元素提供數(shù)據(jù)雙向綁定，.sync修飾符用于為任意屬性提供數(shù)據(jù)雙向綁定，接下來我們來嘗試不使用vue提供的語法糖，自己實現(xiàn)數(shù)據(jù)雙向綁定。

要想view發(fā)生改變的時候引起model的改變首先要監(jiān)聽到view的改變，view發(fā)生改變時再去改變model，有了思路之后下面是代碼實現(xiàn)。

//首先通過input事件監(jiān)聽視圖的改變
<input type="text" :value="inputTitle" @input="onInput">
data:{
  return {
    text:'文本輸入框'
  }
},
methods:{
  //視圖發(fā)生改變的時候，將視圖的值賦予模型的值，實現(xiàn)數(shù)據(jù)雙向綁定
  onInput(event) {
    this.text=event.target.value;
  }
}

4 vue中的單向數(shù)據(jù)流實現(xiàn)原理

vue的單向數(shù)據(jù)流涉及到Object.defineProperty()這個API。

Object.defineProperty用法:

//Object.defineProperty用于數(shù)據(jù)劫持，可以監(jiān)聽一個變量的讀取與寫入，并在發(fā)生讀取與寫入的時候執(zhí)行回調(diào)函數(shù)
Object.defineProperty(obj,prop,desc);
//obj是要定義的對象，prop是要定義的屬性名，desc是屬性的描述符

舉例：

//定義一個對象并監(jiān)聽他的text屬性的存值操作與取值操作
let data={};
Object.defineProperty(data,'text',{
  get() {
    console.log('取值操作');
  },
  set(newVal) {
    console.log('存值操作');
  }
});
console.log('data');
===>輸出:
===>{}
===>取值操作
data.text='文本輸入框';
===>輸出
===>存值操作

有了Object.defineProperty()這個API就可以監(jiān)聽model中數(shù)據(jù)的改變并在數(shù)據(jù)改變的時候修改視圖達(dá)到單向數(shù)據(jù)流的效果。

5 實現(xiàn)一個簡易的數(shù)據(jù)雙向綁定

下面實現(xiàn)一個簡易的數(shù)據(jù)雙向綁定，目標(biāo)是在修改view可以使model中的變量發(fā)生改變，修改model可以使視圖發(fā)生改變。

//html
<div id="app">
  <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定義model
let data={
  text:''
};
//監(jiān)聽model中text的變化，首先實現(xiàn)數(shù)據(jù)單向流
Object.defineProperty(data,text,{
  get() {
  
  }，
  //text發(fā)生改變的時候，修改input元素的value值 
  set(newVal) {
    input.value=newVal;
  }
});
//監(jiān)聽input元素的改變并修改model的值，實現(xiàn)數(shù)據(jù)雙向綁定
input.addEventLisener('input',event=> {
  data.text=event.target.value;
});

至此就實現(xiàn)了簡易的數(shù)據(jù)雙向綁定，可以在控制臺中修改data.text的值來查看視圖是否發(fā)生改變，修改input元素的值在控制臺中打印data.text查看model是否發(fā)生改變。

總結(jié)

以上所述是小編給大家介紹的vue響應(yīng)式更新機(jī)制及不使用框架實現(xiàn)簡單的數(shù)據(jù)雙向綁定問題 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！