vue 2.0 生命周期问题？为什么我的轮播图前面总是空一个图片的位置？

Question

主要问题就是我无法消除这个轮播图开始时前面部分的空白，图片数据时从api上面获取的，在created里面使用axios获取。最后造成了前段空白的现象。

自己又对比了在data里面加入图片链接数组的方式，问题就不存在了。

思考好久也不明白是什么原因？还望大神们指教。

<template>
  <div>
    <div class="carousel-wrap">
      <transition-group tag="ul" name="list" class="scroll-ul" :style="{height: imgHeight+'px'}">
        <li v-for="(img,index) in imgs" v-show="index === mark" :key="index">
          <a :href="img.url">
            <img :src="img.imageUrl" ref="img">
          </a>
        </li>
      </transition-group>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      mark: 1,
      imgs: [],
      imgHeight: 0,
      timer: ""
    };
  },
  created() {
    console.log(this.imgHeight);
    this.getImgs();
  },
  mounted() {
    this.$nextTick(() => {
      this.timer = setInterval(this.autoplay, 3000);
    });
  },
  methods: {
    getImgs() {
      axios.get("http://localhost:3000/banner").then(res => {
        this.imgs = res.data.banners;
        let realWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        let img = new Image();
        img.src = res.data.banners[0].imageUrl;
        let that = this;
        img.onload = function() {
          that.imgHeight = (img.naturalHeight * realWidth) / img.naturalWidth;
        };
      });
    },
    autoplay() {
      this.mark++;
      if (this.mark === this.imgs.length) {
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoplay, 3000);
    }
  }
};

Answer 1

1.异步ajax是需要时间成本的，你看下你的图片是不是在请求完成后才渲染到页面。
2.解决思路有两个：

2.1 DOM先渲染，但是图片有默认占位图
2.2 等图片数据OK后，再渲染DOM，即在你的循环列表外面加上`v-if="data && data.imgs"`