手动实现双向绑定（简略版）

使用defineproperty来定义setter、getter来进行拦截与更新Dom
Html:

<input id = 'input1' />
<input id = 'input2' />

JavaScrpt:

let model = { value: '' };
let vm = {};
Reflect.defineProperty(vm, 'value', {
  set(newValue) {
    Reflect.set(model, 'value', newValue);
    document.getElementById('input2').value = newValue;
    document.getElementById('input1').value = newValue;
  },
  get() {
    return Reflect.get(model, value);
  }
})
document.getElementById('input1').addEventListener('input', (e) => {
  vm.value = e.target.value;
})
document.getElementById('input2').addEventListener('input', (e) => {
  vm.value = e.target.value;
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容