vue雙向數據綁定原理

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

  <script>
    var text = document.getElementById("text"),
      show = document.getElementById("show");

    var model = {};

 
    Object.defineProperty(model, "name", {
      configurable: true, // 默認爲 false，決定該屬性能不能被刪除
      get: function() { // 當訪問該屬性時，此方法會被執行
        console.log("model.name 被訪問了");
      },
      set: function(newValue) { // 當屬性值被修改時，該方法會被執行
        console.log("model.name 新值是：", newValue);

        text.value = newValue;//修改view
        show.innerText = newValue;
      }
    });

    text.oninput = function() {
      model.name = this.value;//修改model
    };
  </script>

語法：Object.defineProperty(obj, prop, descriptor);
說明：會直接在一個對象上定義一個新屬性，或者修改一個對象現有的屬性，並返回這個對象。
描述：
obj：必須，目標對象；
prop：必須，要定義或者修改的屬性名；
descriptor：必須，是被定義或者修改的屬性描述符，是一個對象。

vue通過雙向數據綁定，實現了view和model的同步更新，vue的雙向數據綁定主要是通過使用數據劫持結合發佈者訂閱者模式來實現的。

首先我們通過object.defineProperty方法來對Model數據各個屬性添加訪問器屬性以此來實現數據的劫持，因爲當model中的數據發生變化的時候，我們可以通過配置的set和get方法來實現對view的數據更新和通知。