1. 程式人生 > >vue的思中雙向資料繫結的原理

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 函式的引數。  

注意:

如果以下任一條件為 true,則引發 TypeError 異常:

  • object 引數不是物件。

  • 此物件不可擴充套件且指定的屬性名稱不存在。

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

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

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

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