轻松理解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 ElementUI之Form表单验证遇到的问题
栏 目：vue
本文标题：轻松理解vue的双向数据绑定问题
本文地址：http://www.codeinn.net/misctech/158755.html
