使用Proxy实现简单的双向数据绑定

简介：手把手教你如何使用Proxy实现简单的双向数据绑定

• 获取dom对象

const input = document.getElementById('input');
const span = document.getElementById('span');

• 设置代理对象

const obj = {};
const inputProxy = new Proxy(obj, handler);

• 配置代理选项

const handler = {
  get: function (target, key) {
    return target[key];
  },
  set: function (target, key, value) {
    if (key === 'text' && value) {
      span.innerHTML = value;
      return (target[key] = value);
    }
  },
};

• 添加事件

input.addEventListener('keyup', function (e) {
  inputProxy.text = e.target.value;
  console.log(inputProxy.text);
});