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

站在用戶的角度思考問題，與客戶深入溝通，找到慶陽網(wǎng)站設(shè)計(jì)與慶陽網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋慶陽地區(qū)。

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

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

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

//這個(gè)是單向數(shù)據(jù)流，改變這個(gè)input的value值并不能是data中的text屬性發(fā)生改變。

data:{
  return {
    text:'文本輸入框'
  }
}
//這個(gè)是雙向數(shù)據(jù)綁定，無論是修改model還是修改view都能引起另一方的改變。

data:{
  return {
    text:'文本輸入框'
  }
}

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

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

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

//首先通過input事件監(jiān)聽視圖的改變

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)聽一個(gè)變量的讀取與寫入，并在發(fā)生讀取與寫入的時(shí)候執(zhí)行回調(diào)函數(shù)
Object.defineProperty(obj,prop,desc);
//obj是要定義的對象，prop是要定義的屬性名，desc是屬性的描述符

舉例：

//定義一個(gè)對象并監(jiān)聽他的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)聽model中數(shù)據(jù)的改變并在數(shù)據(jù)改變的時(shí)候修改視圖達(dá)到單向數(shù)據(jù)流的效果。

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

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

//html

  

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

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

總結(jié)

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