JS实现vue的双向数据绑定基本原理

<input type="text" oninput="inputFn()"/>
<script>
	//data对象
	let data = {
      
      
		msg: "msg",
	};
	//vm实例：此处的vm实例其实相当于一个中介，将DOM视图的input输入框与data对象连接起来
	let vm = {
      
      };
	//1.变量改变视图：使用Object.defineProperty劫持对象属性的值改变，set方法里影响视图，表明vm发生了改变，在里面改变data对象
	Object.defineProperty(vm, 'msg', {
      
      
		set(val) {
      
      
			data['msg'] = val;
			//2.vm实例发生改变触发试图对象改变
			document.querySelector('input').value = val;
		},
		get() {
      
      
			return data['msg'];
		}
	});
	//2.视图改变变量，监测input/change事件，一旦文本框的值发生改变，触发vm实例发生改变，进而触发set方法使得data对象发生改变
	function inputFn(e) {
      
      
		vm.msg = e.target.value;
	}
	//默认值显示
	vm.msg = data.msg;
</script>

归纳，上述使用了一个中间对象vm，用vm实例将视图对象input与数据对象data串联起来，也是vue的MVVM思想。
MVVM思想：视图（input对象）的变化会更新到视图模型（vm实例），视图模型的变化也会自动同步到视图上。