分別使用 Object.defineProperty 和 proxy 實現簡單的數據雙向綁定

Object.defineProperty

<input id="input">
<span id="span"></span>

const data = {
  text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');

function define(data, key, value) {
  Object.defineProperty(data, key, {
    set(newV) {
      input.value = newV;
      span.innerHTML = newV;
   // 可以看到，這裏其實是需要 另外一個 不涉及到 data 內存的地址來專門存放數據
   // 可以使用閉包
   // 要不然會陷入死循環
   // 可以試試看改成 data[key] = value
      value = newV
    },
    get() {
   // 同上， 可以試試 return data[key]
      return value
    }
  })
}
define(data, 'text', data.text)
input.addEventListener('input', function (e) {
  data.text = e.target.value  
});

proxy

const data = {
  text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');

const handler = {
// 可以看到，這裏其實是沒有指定 key 的，也就是說，他是綁定在所有屬性上的
// 因此不需要像 definePropery 一樣， 每一個 key 都要執行一次 definePropery 
  set(target, key, value) {
    target[key] = value;
    input.value = value;
    span.innerHTML = value;
    
    return value;
  },
//  事實上，不同於 defineProperty ，這裏不需要設置 get 也能夠拿到對應的屬性
  get(target, key) {
    return target[key];
  }
}
const proxy = new Proxy(data, handler);
input.addEventListener('input', function (e) {
  proxy.text = e.target.value  
})

而且 proxy 經過專門的優化，運行速度比 defineProperty 要快