雙向繫結原理

<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);
  }
});