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

let data={};
Object.defineProperty(data,'text',{
get() {
console.log('取值操作');
},
set(newVal) {
console.log('存值操作');
}
});
console.log('data');
===>输出:
===>{}
===>取值操作
data.text='文本输入框';
===>输出
===>存值操作

有了

Object.defineProperty()

这个API就可以监听model中数据的改变并在数据改变的时候修改视图达到单向数据流的效果。

5 实现一个简易的数据双向绑定

下面实现一个简易的数据双向绑定，目标是在修改view可以使model中的变量发生改变，修改model可以使视图发生改变。

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

至此就实现了简易的数据双向绑定，可以在控制台中修改data.text的值来查看视图是否发生改变，修改input元素的值在控制台中打印data.text查看model是否发生改变。

总结

以上所述是小编给大家介绍的vue响应式更新机制及不使用框架实现简单的数据双向绑定问题 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！