vm.$nextTick( [callback] )用法

在项目开发中，经常会遇到这样的场景。通过ajax获取到数据后，我们要去渲染轮播图的dom或者初始化列表使用的滚动插件，如下：

var app = new Vue({
    el: '#app',
    data: {
        bannerData: [],
        listData: []
    },
    created () {
        var that = this
          // 在created钩子函数中调用ajax获取数据
           jq.ajax({
            // 省略。。。
            success (data) {
                that.bannerData = data.bannerData
                that.listData = data.listData
                // 赋值成功后，初始化轮播图插件，滚动插件
                this.initBanner()
                 this.initScroll()
            }
           })  
     }
})

如以上代码，当我们将项目跑起来时往往会发现我们的轮播图无法轮播，列表也无法滚动。问题产生的原因是什么？

原因是vue的异步渲染dom。当我们给data选项中的属性完成赋值后，dom渲染工作是异步进行的。也就是说当我们对轮播图，滚动列表进行初始化的时候，dom还未渲染结束，自然也就无法生效了。

解决的办法是什么？使用vm.$nextTick( [callback] )！

用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

了解用法之后修改以上代码 created 钩子函数部分

created () {
    var that = this;
    jq.ajax({
        success (data) {
            that.bannerData = data.bannerData
            that.listData = data.listData
            that.$nextTick(() => {
                // 当dom渲染完成后，初始化轮播图插件，滚动插件
                 this.initBanner()
                 this.initScroll()
            })
    })
}

ok，dom异步渲染问题再也难不到我们啦！