雙向數據綁定實現原理

vm的核心是view 和 data 

當data 有變化的時候它通過Object.defineProperty(）方法中的set方法進行監控，並調用在此之前已經定義好data 和view的關系了的回調函數，來通知view進行數據的改變
而view 發生改變則是通過底層的input 事件來進行data的響應更改

　　

雙向數據綁定實現原理

用到了input事件（只要往input框中輸入內容就會觸發）以及ES5中Object.defineProperty()

怎么直到對象的數據發生改變：

　　1.angular1中用臟數據檢查機制（用定時器）輪詢；缺點：性能低，可以兼容ie8

　　2.vue中數據劫持，用到ES5中Object.defineProperty()

 

下面代碼使用vue中的方法實現的數據劫持

　　<p></p>
　　<input type="text">

　　

  <script>
    let p = document.querySelector('p');
    let inp = document.querySelector('input');
    let obj = {
      msg: 'hello'
    }

    p.innerText = obj.msg
    inp.value = obj.msg

    //實現視圖變化數據跟着變化
    inp.oninput = function () {
      // console.log(inp.value);  
      obj.msg = inp.value
      // console.log(obj.msg);
    }

    //實現數據變化視圖跟着變化
    let temp = obj.msg
    Object.defineProperty(obj, 'msg', {
      get() {//get方法會劫持msg這個屬性的獲取操作
        return temp
      },
      set(value) {//set方法會劫持msg這個屬性的設置操作
        temp = value
        p.innerText = temp
        inp.value = temp
      }
    })

  </script>