$nextTick() Swiper轮播组件

在vue中使用Swiper轮播组件，最先想到的是在watch中new一个Swiper

watch: {
      categorys(value) {
          new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true
          })
      }
    }

但是发现轮播还是没实现，因为watch只是监视数据更新，但是界面还没有更新，所以Swiper没有效果，
后来发现vue实例方法有this.$nextTick()（也有全局的Vue.nextTick），官方解释如下：

• 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

说的通俗点就是：一旦界面完成更新，立即调用（但此条语句一定要写在数据更新之后）
修改后的代码 ：

watch: {
      categorys(value) {
        this.$nextTick(function () {
          new Swiper('.swiper-container', {
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true
          })
        })
      }
    }

轮播就没问题了。