$refs 内的 ref 数组在 Mounted() 内取消定义

Question

我正在开发一个简单的图像滑块组件。在模板中，我用来v-for创建img标签并ref保留对每个标签的引用。

Vue.component('slide', {
    template: `
    <div class="c-image-slider">
      <img ref="im" :key="image" class="c-image-slider__slide" v-for="image in images" :src="image">
    </div>
    `,
    data() {
      return {
        currentImage: 0,
        images: [],
      };
    },
    mounted() {
      this.images = images;
      console.log(this.$refs);
      console.log(this.$refs.im);
    },
  });

在组件的钩子内，mounted()我试图记录this.$refs.im数组，但undefined结果是，尽管数组肯定在那里。我缺少什么？

这也是复制该问题的笔： https: //codepen.io/anon/pen/LQMMBK

Answer 1

重新渲染是异步的。当您在此处设置安装的图像时：

this.images = images;

您触发了重新渲染，但 Vue 不会立即执行此操作。在此之前，没有，$refs因为还没有渲染图像。

当您立即记录时，其记录的内容与当时的情况$refs完全相同。然后发生预定的重新渲染，并且 Vue 填充.$refs

您可以使用$nextTick正确注销它。

mounted() {
  this.images = images;
  this.$nextTick(() => {
    console.log(this.$refs);
    console.log(this.$refs.im);
  })
}

更新了笔。