Vue对比传统模板渲染实现局部刷新
一、dom局部刷新流程请求后台数据(一般用Ajax)。将数据加载到template模板。将模板渲染输出的html结果放到需要刷新的dom节点中。上面第2步中提到的模板渲染框架有很多,例如underscore.js库等,但是核心流程都是获取后端的数据,按照一定的规则加载到写好的模板中,输出成在浏览器中显示的HTML的过程。二、Vue实现局部刷新请求后台数据。无需进行模板渲染,...
一、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的生命周期函数(钩子函数)等。
看到一篇讲双向数据绑定的文章,写的非常好。
更多推荐
所有评论(0)