双向数据绑定

<input type="text" id='inp'>
<div id='view'></div>

let oInp = document.getElementById('inp');
let oDiv = document.getElementById('view');
let oData = {
	value: ''
}
function updateView () {
	oDiv.innerText = oData.value;
}
oInp.oninput = function () {
	oData.value = this.value;
}
observer(oData);
function observer (data) {
	if(!data || typeof data != 'object') return data;
	if(Array.isArray(data)){
	  data.__proto__ = arrProto
	}
	Object.keys(data).forEach(key => {
		definedRective(data, key, data[key]);
	});
}
function definedRective (data, key, val) {
	observer(val);
	Object.defineProperty(data, key, {
		get () {
			return val;
		},
		set (newVal) {
			if(newVal === val) return;
			observer(newVal)
			val = newVal;
			updateView();
		}
	});
}
// 重写数组
const oldArrProperty = Array.prototype
const arrProto = Object.create(oldArrProperty)
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(methodName => {
  arrProto[methodName] = function () {
    updateView() // 更新视图
    oldArrProperty[methodName].call(this, ...arguments)
  }
})