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.オブジェクトの各プロパティのリスナーを個別に設定する必要がある。