正确理解使用Vue里的nextTick方法

最近，在项目中要使用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);     });

See

总结：

* `Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。
* `Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。