vue响应式更新机制及不使用框架实现简单的数据

//这个是单向数据流，改变这个input的value值并不能是data中的text属性发生改变。
<input type="text" :value="text">
data:{
  return {
    text:'文本输入框'
  }
}
//这个是双向数据绑定，无论是修改model还是修改view都能引起另一方的改变。
<input type="text" v-model="text">
data:{
  return {
    text:'文本输入框'
  }
}

//通过input事件监听视图的改变
<input type="text" :value="inputTitle" @input="onInput">
data:{
  return {
    text:'文本输入框'
  }
},
methods:{
  //视图发生改变的时候，将视图的值赋予模型的值，实现数据双向绑定
  onInput(event) {
    this.text=event.target.value;
  }
}

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

//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;
});