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

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

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

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

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

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

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

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

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

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

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

Object.defineProperty用法:

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

舉例：

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

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

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

下面實(shí)現(xiàn)一個(gè)簡(jiǎ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)聽(tīng)model中text的變化，首先實(shí)現(xiàn)數(shù)據(jù)單向流
Object.defineProperty(data,text,{
  get() {
  
  }，
  //text發(fā)生改變的時(shí)候，修改input元素的value值 
  set(newVal) {
    input.value=newVal;
  }
});
//監(jiān)聽(tīng)input元素的改變并修改model的值，實(shí)現(xiàn)數(shù)據(jù)雙向綁定
input.addEventLisener('input',event=> {
  data.text=event.target.value;
});

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

總結(jié)

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

最新評(píng)論