简易双向绑定

[lvleihere]

// one
const data = {
    value: ''
};
const _data = {
    value: ''
};
Object.defineProperty(data, 'value', {
    get() {
          return _data.value;
    },
    set(value) {
          ipt.value = value;
          _data.value = value;
          console.log(data.value);
    }
});
const ipt = document.querySelector('input');
ipt.addEventListener('input', function(e) {
    data.value = e.target.value;
});

 setTimeout(() => {
     data.value = 3;
}, 3000);

// other
let data = {};
const _data = {};
data = new Proxy(data, {
    get(target, prop, receive) {
        return _data[prop];
    },
    set(target, prop, value, receive) {
       ipt.value = value;
        _data[prop] = value;
        console.log(data.value);
    }
});
        
// V -> M
const ipt = document.querySelector('input');
ipt.addEventListener('input', function(e) {
   data.value = e.target.value;
});

// M -> V
setTimeout(() => {
    data.value = 3;
}, 3000);