双向绑定原理

双向绑定原理

<input type="text" oninput="evtInput()" id="input"/>
  <p id="text"></p>

// 1、定义对象vue,其中有个属性：name
let vue = { name: "123" };

function evtInput() {
  // 页面数据发生变化如何通知到JS
  vue.name = document.getElementById("input").value;
  document.getElementById("text").innerHTML = vue.name;
  console.log("页面上的数据发生了变化：", vue.name);
}

// 2. 拦截对象vue的元素name，重新处理get和set方法。
// JS数据变化如何通知到页面
Object.defineProperty(vue, "name", {
  // 当获取name元素值时，get方法被执行。
  get: function() {
    console.log("get方法被执行");
    return "456";
  },
  // 当重新赋值name值时，set方法被执行。
  set: function(v) {
    document.getElementById("input").value = v;
    document.getElementById("text").innerHTML = v;
    console.log("set方法被执行，js数据变化通知到页面，新的值为：", v);
  }
});