vue的雙向綁定原理：Object.defineProperty()

時間 2019-11-22

標籤 vue 雙向綁定原理 object.defineproperty object defineproperty 简体版

原文原文鏈接

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。vue

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。app

<body>

  <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
  </div>

  <script>
  var obj = {}

  Object.defineProperty(obj, 'txt', {
    get: function () {
      return obj
    },
    set: function (newValue) {
      document.getElementById('txt').value = newValue
      document.getElementById('show').innerHTML = newValue
    }
  })
  document.addEventListener('keyup',
  function (e) {
    obj.txt = e.target.value
  })
  </script>
</body>

相關標籤/搜索

object.defineproperty

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。