雙向數據綁定的原理

雙向數據綁定的原理

首先我們來理解一下什麼是雙向，如下圖所示，當服務端中的數據發生改變，也就是data(Model)發生改變，View就會發生改變，這是正向的。當View層有數據發生改變的時候，那就觸發相應的data（Model）層改變，這是反向的。那麼這就是雙向的。

那麼他們是怎麼做到view層改變data就改變的，data改變View就改變的呢，這中間其實就是view-modle層來進行監控處理的。主要用的是es5中的Object.defineProperty的API來監聽數據的變化，從而刷新視圖。

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。
其中有兩個屬性，get和set屬性，get是用戶讀取數據的時候觸發，set是數據改變或設置時觸發，當數據發生改變的時候就會自動觸發set方法，該方法接受唯一的參數，即改變後的數據。
Object.defineProperty() 的語法

Object.defineProperty(obj, prop, descriptor)
/**
* obj：要在其上定義屬性的對象。
* prop：要定義或修改的屬性的名稱。
* descriptor：將被定義或修改的屬性描述符。
**/

例如想要更改一個對象的屬性值，如下

        var vm = {}
        var data = {
            name: '哈哈哈'
        }
 
        Object.defineProperty(vm, 'name', {
             get: function () {
                 console.log('get', data.name) // 監聽
                 return data.name
              },
              set: function (newVal) {
                  console.log('set', newVal) // 監聽
                  return data.name = newVal
               }
         })

object.defineProperty與reflect.defineProperty的區別

前者是返回一個新對象，是ES5的API，後者是返回一個布爾值，ES6的API，那後面的話object裏的方法會慢慢遷移到reflect中。