举例：
//定义一个对象并监听他的text属性的存值操作与取值操作
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响应式更新机制及不使用框架实现简单的数据双向绑定问题 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！