最近，在项目中要使用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发生变化，更新后执行的回调。