在项目开发中,经常会遇到这样的场景。通过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异步渲染问题再也难不到我们啦!