Vue双向数据绑定原理的两种实现方式

1、Object.defineProperty(obj, prop, descriptor)

Object.defineProperty()会在一个对象上，新建或修改一个现有的属性，并返回这个对象

• obj 定义属性的对象
• props 属性名称
• descriptor 属性描述

descriptor 属性描述

属性描述具有的属性

• configurable 为true时属性才能被改变
• enumerable 为true可以被枚举
• get() 返回属性的值，可以被重写
• set(newValue) 属性的值被修改时，会触发set()

实现原理

利用Object.defineProperty定义的属性，属性的值在被修改时，会触发set()
在set()方法中将数据利用dom操作绑定到对应的dom节点。

let obj = {};
let input = document.getElementById('input');
let span = document.getElementById('span');
Object.defineProperty(obj, 'text', {
  configurable: true,
  enumerable: true,
  get() {
    return obj.text
  },
  set(newVal) {
    input.value = newVal
    span.innerHTML = newVal
  }
});
input.addEventListener('keyup', (e) => {
  obj.text = e.target.value
});

2、new Proxy(target, handler) 对象用于定义基本操作的自定义行为

• target 目标对象
• handler 一个对象，其属性是当执行一个操作时定义代理的行为的函数。

handler属性

• get(target, name) 返回属性的值，可以被重写
• set(obj, prop, value) 修改属性的值时会被触发

实现原理

在修改属性的值时，会触发set()，在set中执行相关的dom操作。

let obj = {
    inputText: ''
  };
  let input = document.getElementById('input');
  let span = document.getElementById('span');
  let handler = {
    set: (obj, props, value) => {
      if('inputText' === props){
        input.value = value;
        span.innerHTML = value;
      }
      obj[props] = value;
    }
  };
  let proxy = new Proxy(obj, handler);
  input.addEventListener('keyup',(e) => {
    proxy.inputText = e.target.value;
  });