Vue.js Swiper 切换 bannerList 失败？使用 $nextTick 解决！

在使用 Vue.js 开发过程中，经常会遇到需要使用 Swiper 组件来实现 banner 图的切换。然而，当 watch 监听到的 bannerList 数据发生变化时，可能会出现 Swiper 无法切换的问题。

这是因为 watch 监听到的 bannerList 数据变化还没有被渲染到页面上，需要使用 $nextTick 方法将回调函数延迟到下次 DOM 更新循环之后执行，确保 v-for 已经执行结束了。如果没有使用 $nextTick 方法，可能会导致 Swiper 初始化时找不到对应的 DOM 元素，从而无法切换 bannerList。

以下是代码示例：

watch: {
  // 监听 bannerList 数据的变化：因为这条数据发生过变化---由一个空数组变为数组里面有四个元素
  'bannerList': {
    immediate: true,
    handler(newValue, oldValue) {
      // 通过 watch 监听 bannerList 属性的属性值的变化
      // 如果执行 handler 方法，代表组件实例身上这个属性的属性值已经有了【数组：四个元素】
      // 当前这个函数执行只能保证 bannerList 数据已经有了，没办法保证 v-for 已经执行结束了，要配合 $nextTick 使用
      // $nextTick:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
      this.$nextTick(() => {
        var mySwiper = new Swiper('.swiper', {
          direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            // 点击小球的时候也切换图片
            clickable: true
          },

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

          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar'
          }
        });
      });
    }
  }
},

通过使用 $nextTick 方法，可以确保 Swiper 初始化时能够找到对应的 DOM 元素，从而实现 bannerList 的切换。