一、dom局部刷新流程
- 请求后台数据（一般用Ajax）。
- 将数据加载到template模板。
- 将模板渲染输出的html结果放到需要刷新的dom节点中。
上面第2步中提到的模板渲染框架有很多，例如
underscore.js库等，但是核心流程都是获取后端的数据，按照一定的规则加载到写好的模板中，输出成在浏览器中显示的HTML的过程。
二、Vue实现局部刷新
- 请求后台数据。
- 无需进行模板渲染，只需要修改dom节点对应的Vue实例中的数据，dom节点中的数据会自动变化。
这是因为vue的一个mvvm框架：
数据双向绑定，当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
三、分别用传统方式和Vue实现一个例子
页面上只有一个div和一个button，点击按钮，去后台请求数据并替换div中的数据。
3.1 传统方式
- html页面代码如下：
<body>
<div id="show"></div>
<button id="changeBtn">替换user</button>
</body>
- js代码如下：
<script>
//当前用户Id
var currentId = 1;
//点击按钮
$("#changeBtn").click(function () {
currentId == 1?currentId=2:currentId=1
changeUser(currentId)
});
//替换user的方法
function changeUser(id){
$.ajax({
url : '/get',
data : {id:id},
method : 'post',
success : function (user) {
$("#show").html(user.name);//局部刷新
console.log(user);
}
});
}
</script>
结果如下：点击“替换user”，div的内容会被替换。
这个例子中，ajax请求成功后，利用
$("#show").html(user.name);修改div的内容（由于内容简单，没有用模板渲染，复杂的数据结构一般都会用模板渲染来构造html代码，然后在刷新dom）。
3.2 Vue方式
- html代码：
<body>
<div id="show">{{userName}}</div>
<button id="changeBtn" v-on:click="changeU">替换user</button>
</body>
js代码：
<script>
//展示user的Vue组件
var divVm = new Vue({
el:'#show',
data: {
userName : '暂无'
}
});
//按钮组件
var btnVm = new Vue({
el:'#changeBtn',
data: {
currentId : -1
},
methods :{
changeU : function () {
this.currentId == 1?this.currentId=2:this.currentId=1;
changeUser(this.currentId);
}
}
});
//替换user的方法
function changeUser(id){
$.ajax({
url : '/get',
data : {id:id},
method : 'post',
success : function (user) {
divVm.userName = user.name;
console.log(user);
}
});
}
</script>
上面例子中，ajax请求数据成功以，没有任何操作dom的代码，只是修改了divVm实例的数据
divVm.userName = user.name;div的内容自动就变了。下面说一下divVm和btnVm，他们两个都是Vue实例。divVm封装了dom节点中的div、以及div涉及到的数据；btnVm封装了dom节点中button、以及button要用到的数据和点击事件。vue会自动监听vue实例中的数据变化，如果发现vue实例中的数据变化了，将自动更新vue实例中对应的dom节点内容。vue的每一个实例的数据，只能通过实例本身来修改，vue实例中的方法只能通过vue实例本身来调用。这样的好处是进行了很好的隔离，节点之间互相不干涉。
上面例子中vue将下面的内容都封装成了一个vue实例：
- dom节点。
- dom节点需要的数据。
- 操作dom节点可能用到的方法。
这部分这只是本例子体现出来的，vue还有很多其他强大的特性可以实现更复杂的业务逻辑，例如vue的生命周期函数（钩子函数）等。
看到一篇讲双向数据绑定的文章，写的非常好。