轻松理解vue的双向数据绑定问题

时间：2021-05-25

Vue介绍

Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。

Vue与MVVM

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。Vue以数据为驱动，将自身的Dom元素与数据进行绑定，一旦创建绑定，Dom和数据保持同步。

双向绑定

主流双向数据绑定实现原理

脏值检测 : 这是AngularJS实现双向数据绑定的方式。 原理是 当数据进行变更的时候对所有Model和View的绑定关系进行一次检查，识别是否有数据进行了变更，如果有变化则进行处理，由于可能进一步引发其他数据的改变，会再次循环这个过程，知道没有数据的变化之后。发送数据到视图重新渲染。 可想而知，这样的方式性能不高。

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变

数据数据双向

数据模型（Module）和视图（View）之间的双向绑定。

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

如何使用js达到双向数据绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="userName"><br><span id ="uName"></span><script> var obj={ pwd:"1234" }; //主要使用到了get和set方法，最为关键 Object.defineProperty(obj,"userName",{ get:function(){ console.log('get init'); }, set:function(val){ console.log("set init"); document.getElementById("uName").innerText=val; document.getElementById("userNmae").value=val; } }); document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName=event.target.value; } )</script></body></html>

运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，这也就是vue的双向数据绑定的核心点。

总结

以上所述是小编给大家介绍的轻松理解vue的数据双向绑定问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章