【Vue】使用watch+nextTick解决轮播图问题（swiper）

• watch:数据监听，监听已有数据的变化

<div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(carousel, index) in bannerList"
              :key="carousel.id"
            >
              <img :src="carousel.imgUrl" />
            </div>

1. 通过watch监听bannerList属性的属性值变化
2. 如果执行handler方法，代表组件实例身上这个属性已经有了数组
3. 当这个函数执行只能保证bannerList数据有了，无法保证v-for执行结束
4. v-for结束后才有结构，所以无法显示轮播图

• watch+nextTick 用法：

watch: {
    bannerList: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },

1. 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。
2. 可以保证在页面的结构一定是有的，经常和很多插件一起使用。