最近，在项目中要使用Swiper做一个移动端轮播插件。需要先异步动态加载数据后，然后使用v-for渲染节点，再执行插件的滑动轮播行为。解决这个问题，我们通过在组件中使用vm.$nextTick来解决这一需求。
一、vm.$nextTick( [callback] )
二、Vue.nextTick( [callback, context] )
三、异步更新队列
实例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<ul id=
"demo"
>
<li v-
for
=
"item in list"
>{{item}}</div>
</ul>
new
Vue({
el:
'#demo'
,
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:
function
(){
this
.list.push(11);
this
.nextTick(
function
(){
alert(
'数据已经更新'
)
});
this
.$nextTick(
function
(){
alert(
'v-for渲染已经完成'
)
})
}
}})
|
或者：
|
1
2
3
4
5
6
7
8
9
10
11
|
this
.$http.post(apiUrl)
.then((response) => {
if
(response.data.success) {
this
.topFocus.data = response.data.data;
this
.$nextTick(
function
(){
//渲染完毕
});
}
}).
catch
(
function
(response) {
console.log(response);
});
|
总结：
* `Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
* `Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。