问题：
1.3:初始化swiper实例在哪里书写?
初始化swiper实例之前，页面中的节点（结构）务必要有，
对于Vue一个组件而言，mounted[组件挂载完毕：相应的结构不就有了吗]
mounted-->组件挂载完毕
1.4动态效果为什么没有出来？
Swiper需要获取到轮播图的节点DOM，才能给swiper轮播添加动态效果，
因为没有获取到节点。
1.5第一种解决方案，延迟器（不是完美的解决方案）
同学的想法：都不是完美的【错误的想法】
created里面：created执行与mounted执行，时间差可能2ms，白扯
updated里面：如果组件有很多响应式（data），只要有一个属性值发生变化updated还会再次执行，再次初始化实例。
总结：第一种解决方案可以通过延迟器（异步）去解决问题，
但是这种解决方案存在风险（无法确定用户请求到底需要多长时间），因此没办法确定
延迟器时间。
2:Swiper在Vue项目中使用完美解决方案
第一种解决方案问题出现在哪里：v-for,在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）
watch:监听属性，watch可以检测到属性值的变化，当属性值发生变化的时候，可以出发一次。
Vuex当中的仓库数据bannerList（组件在使用）：
bannerList仓库数据有没有发生过变化？
一定是有的：bannerList初始值空数组，当服务器的数据返回以后，它的bannerList存储的属性值会发生变化【变为服务器返回的数据】
组件实例在使用仓库中的bannerList，组件的这个属性bannerList一定是发生过变化，watch可以监听到。
组件实例的一个方法:$nextTick
this.$nextTick(()=>{
})
nextTick官网解释:
在下次DOM更新, 循环结束之后,执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM。
注意：组件实例的$nextTick方法，在工作当中经常使用，经常结合第三方插件使用，获取更新后的DOM节点
mounted() {
// 派发action：通知Vuex发送ajax请求，将数据存储在仓库中
this.$store.dispatch("getBannerList");
// 在new Swiper实例之前，页面中结构必须的有
// 为什么现在这里结构还不完整
// 因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还没有完全因此不行
// 解决一：添加定时器（不是很好）
// 解决二: 在watch属性里监视bannerList变化
// var mySwiper = new Swiper(".swiper-container", {
// // direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// });
},