VueのnextTickメソッドの使用を正しく理解する(データまたはdomレンダリングが終了した後に関数またはメソッドを実行する方法)


Vue.nextTick(callback)、データが変化すると、更新後にコールバックが実行される.Vue.$nextTick(callback)、domが変化すると、更新後に実行されるコールバック.
例:
  • {{item}}
new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push(){
this.list.push(11);
this.nextTick(function(){
alert('データが更新されました')
});
this.$nextTick(function(){
alert('v-forレンダリング完了')
})
}
}})
まとめ:前のステップで行ったjs操作(ps:データでもdomでも構いません)は、レンダリングが完了したら実行したい関数や方法を実行できます.