$nextTick在项目中的用处

//组件
//swiper.vue

<template>
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <slot></slot>
      </div>
  </div>
</template>
 .....省略不相关代码......
<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css'
export default {
    //组件名字
  name: "swiper",
  .....省略不相关代码.....
   //页面渲染之后
  mounted() {
          new Swiper('.swiper-container',{
              slidesPerView: 4,
          })
  },
  }
</script>

上面组件在其他页面调用后，发现轮播图是空白的。原因是mounted页面渲染之后，数据由于过大不能及时返回，导致图片无法显示。
解决方法：
实例化swiper的时候，外层套一个$nextTick函数，异步加载数据。也就是会等到数据返回之后再加载。

 //页面渲染之后
  mounted(