分别使用 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  
})

1. 而且 proxy 经过专门的优化，运行速度比 defineProperty 要快
2. 但是需要注意的是，proxy 代理数组的时候，会发现一次 改变数据会执行两次 set
3. 第一次是 改变 数组数据，第二次是改变数组长度
4. 从这里也可以看出来，js 中的数组并不是 其他编程语言中的数组，反而是一个 很像数组 的 对象，毕竟 length 还是 其一个 需要手动改变的属性来着