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的数据更新和通知。