轻松理解vue的双向数据绑定问题
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的数据双向绑定问题，希望对大家有所帮助