vue响应式更新机制及不使用框架实现简单的数据双向绑定问题

//定义一个对象并监听他的text属性的存值操作与取值操作
let data={};
Object.defineProperty(data,'text',{
 get() {
 console.log('取值操作');
 },
 set(newVal) {
 console.log('存值操作');
 }
});
console.log('data');
===>

//html
<div id="app">
 <input type="text" id="input">
</div>
//js
let input = document.querySelector('#input');
//定义model
let data={
 text:''
};
//监听model中text的变化，首先实现数据单向流
Object.defineProperty(data,text,{
 get() {
 
 }，
 //text发生改变的时候，修改input元素的value值 
 set(newVal) {
 input.value=newVal;
 }
});
//监听input元素的改变并修改model的值，实现数据双向绑定
input.addEventLisener('input',event=> {
 data.text=event.target.value;
});