$nextTick使用场景，极其清晰易懂

看不懂来打我，文章根据b站视尚硅谷商城前台项目视频讲解 是轮播图，在三十集，第十分钟

做轮播图的时候，正常使用swiper插件，然后把swiper插件放在mounted里面，但是没有出来效果

引包，引样式（说的是swiper插件），

结构写在哪？初学者肯定说要写在mounted里面，

但是写在mounted里面不行，不出动态效果

为啥？

结构还不完整，为啥不完整，for循环，数据是动态的

数据返回以后，才能v-for，才能遍历数据

 

组件里面派发action，数据放在vuex里面，是axios发送请求得到的

执行过程：

1.先执行的mounted

2.vuex中action发送请求，并获得数据

3.组件中初始化swiper数据

4.在vuex中mutation修改数据

dispatch里面有异步语句，导致v-for遍历的时候，结构还没有完全

 

updated：数据更新的时候调用，可以吗？

放这里不行，因为放updated里面会调用多次，其他响应式数据变化的时候一直调用。

 

笨方法，直接在mounted里面，放一个俩秒的定时器，定时器里面有初始化swiper

因为定时器也是异步的

但是轮播图的分页器一排小点，会晚出来

 

mounted里面派发一个action，后边还有一个定时器

先执行 action里面有axios请求，请求完修改数据，

定时器

 

最终解决方案：watch结合this.$nextTick

数据在vuex中，一开始是空数组，请求后变成正常数据

所以数据是有变化过程，可以用watch监听。

watch；：｛

//俩种写法，对象

bannerlists：｛

handler（newValue，oldValue）｛

var mySwiper = new Swiper（）

｝

｝

｝

1.handler方法执行，代表数据肯定有了，

2.this.$nextTick 代表了结构肯定有了

 

this.$nextTick：在下次dom更新循环结束以后延迟回调