极简的两种双向绑定的实现

Proxy + Reflect

HTML代码

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

Javascript代码

const input = document.getElementById('input');
const text = document.getElementById('text');
let obj = {};
let proxy = new Proxy(obj, {
    get: (target, key ,receiver) => {
        return Reflect.get(target, key ,receiver);
    },
    set: (target, key, val, receiver) => {
        if(key == "text"){
            text.innerHTML = val;
        }
        return Reflect.set(target, key ,val, receiver);
    }
})
input.addEventListener('keyup', e => {
    proxy.text = e.target.value;
})

Object.defineProperty()

Javascript代码

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

两者差异

1.Object.defineProperty()本身有一定的监控到数组下标变化的能力，但无法检测到新增或者删除，导致数组新增删除的元素不能实时响应。proxy可以实时响应到数组的所有变动。
例：使用defineProperty监听数组变化，将数组的索引当作属性，当添加一个元素的时候，并不会监听到新添加的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
    Object.defineProperty(arr,index,{
        set:function(val){
            item = val
        },
        get:function(val){
            return item
        }
    })
})

2.Object.defineProperty()劫持的是对象的属性，所以需要对每个对象的所有属性进行遍历劫持。proxy是劫持整个对象，并且返回一个新对象