vue双向数据绑定实现原理

ES5：Object.defineProperty

//html
姓名:<span id="spanName"></span>
<br>
<input type="text" id="inpName">

//JS 2.0
let obj = {
    name: ''
};
let newObj = JSON.parse(JSON.stringify(obj));

Object.defineProperty('obj', 'name', {
    get() {
        return newObj.name;
    },
    set(val) {
        if(val === newObj.name) return;
        newObj.name = val;
        objServer();
    }
});
//==== 2.0 结束


//3.0
let obj = {};
obj = new Proxy(obj, {
    get(target, prop) {
        return target[prop];
    },
    set(target, prop, value) {
        target[prop] = value;
        objServer();
    }
})
//==== 3.0 结束

function objServer() {
    spanName.innerHtml = newObj.name;
    inpName.value = newObj.name;
}

setTimeout(() => {
    obj.name = '天气很热';
}, 1000);

inpName.oninput = function() {
    obj.name = this.value;
}

//2.0弊端：
1.对原始数据克隆
2.需要分别给对象中设定每个属性设置监听