vue的思中雙向數據綁定的原理

我們在面試中經常會被問道什麼是mvc 什麼是 mvvm  還有雙向數據綁定的原理：

MVC：對項目的整體把控,M代表的是數據庫中的數據,V代表的是前端的視圖層，C用於處理M和V之間進行交互的業務邏輯(業務邏輯需要程序員自己控制，自己編寫)

MVVM:主要用於一些前端的框架,對MVC三層架構中的視圖層再次進行層次劃分，M是當前一個視圖中需要用到的數據,V就是當前視圖,VM負責M和V之間的數據調度,內部已經幫你完成了數據的綁定和交互

MVC和MVVM之間的區別:MVC數據流通是單向的,MVVM是雙向數據綁定

雙向數據綁定：

雙向數據綁定的意思就是模型中的數據可以之間更新到視圖上,視圖中的數據發生改變也可以直接更新到模型中 能夠做到雙向數據綁定(通信)的原因:就是因爲有VM的存在，VM內部的實現一般是框架已經處理完成,不需要程序員進行控制

• 雙向數據綁定原理: Object.defineProperty存取器
• 使用Object.defineProperty提供的set方法可以在給對象賦值時,觸發額外操作,即在set函數內部去處理視圖的更新
  

• // 使用 Object.defineProperty 可以給對象賦值
  var obj = {};
  
  Object.defineProperty(obj,'name',{
      value:'zxx'
  })
  
  console.log(obj.name)
  
  var obj = {};
  var initValue = 'zxx'
  Object.defineProperty(obj,'name',{
      get:function(){
          console.log('我被讀取了')
          return initValue
      },
      set:function(v){
          console.log('我被賦值了')
          initValue = v
      }
  })
  obj.name = 'lxy'
  console.log(obj.name)

  說道 Object.defineProperty  將屬性添加到對象，或修改現有屬性的特性。
• 它的語法  有三個參數

  Object.defineProperty(object, propertyname, descriptor)

• object

  必需。  要在其上添加或修改屬性的對象。  這可能是一個本機 JavaScript 對象（即用戶定義的對象或內置對象）或 DOM 對象。  

  propertyname

  必需。  一個包含屬性名稱的字符串。  

  descriptor

  必需。  屬性描述符。  它可以針對數據屬性或訪問器屬性。

• Object.defineProperty它的返回值是 已經被修改了的對象
  

      可使用 Object.defineProperty 函數來執行以下操作：

• 向對象添加新屬性。  當對象不具有指定的屬性名稱時，發生此操作。  

• 修改現有屬性的特性。  當對象已具有指定的屬性名稱時，發成此操作。  

描述符對象中會提供屬性定義，用於描述數據屬性或訪問器屬性的特性。  描述符對象是 Object.defineProperty 函數的參數。  

若要向對象添加多個屬性或修改多個現有屬性，可使用 Object.defineProperties 函數 (JavaScript)

注意：

如果以下任一條件爲 true，則引發 TypeError 異常：

• object 參數不是對象。

• 此對象不可擴展且指定的屬性名稱不存在。

• descriptor 具有 value 或 writable 特性，並且具有 get 或 set 特性。

• descriptor 具有 get 或 set 特性，上述特性不是函數且已定義。

• 指定的屬性名稱已存在，現有屬性具有 false 的 configurable 特性，且 descriptor 包含一個或多個與現有屬性中特性不同的特性。  但是，當現有屬性具有 false 的 configurable 特性和 true 的 writable 特性時，則允許 value 或 writable 特性不同。

以上是查閱文檔 和自己的總結整理的 希望對你們有幫助