VueJS组件不会渲染,直到我在Vue Devtools中单击它

Question

我在博客后端的一个部分(而不是SPA)上使用VueJS 2.5.3进行API调用以检查附加到帖子的特色图像.

如果找到一个,它使用子组件来显示图像.问题是在API调用成功后子组件没有呈现,因此图像对象也没有传递给它.

正如您在此GIF中看到的那样,子组件未呈现<!---->,我v-if在其上检查图像是否存在.但是,如果我单击Vue DevTools中的子组件,子组件将呈现并按预期显示图像.

我的问题是为什么只有在Vue Devtools中点击它后,子组件才会呈现？当您单击某个组件时,Vue Devtools会触发某种事件吗？

这是子组件:

<template>
    <div v-if="showImage" class="featured-image-container" :class="[ size ]">
        <img :src="processedSrc" alt="Featured Image">
    </div>
</template>

<script>
export default {
    props: {
        image: {
            type: Object
        },
        size: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            showImage: false
        }
    },
    computed: {
        processedSrc: function () {
            if (this.image && typeof this.image === 'object') {
                this.showImage = true
                return this.image.sizes[this.size].file
            } else {
                this.showImage = false
            }
        }
    }
}
</script>

这里是父代组件和子组件代码的链接:

Answer 1

问题出在您的PostFeaturedImage.vue组件中.您依赖于计算值processedSrc来设置数据属性showImage.

但是,showImage最初是false您v-if在根元素的指令中使用它.这意味着Vue不会渲染该元素或其中的<img>元素.

Vue中的计算属性是延迟加载的,这意味着在引用它们之前不会调用它们的函数.由于processedSrc计算属性仅在<img>元素上被引用(并且由于该元素未被呈现),因此不会调用其方法,这意味着该showImage属性永远不会被设置为true.

但是,当您在Vue DevTools中检查组件时,它会列出所有计算属性,这意味着processedSrc将调用计算器的方法,并showImage在该情况下设置属性.

对你的问题最简单的解决方案是使用v-show而不是v-if,因为一个内部的元素v-show将被隐藏但仍然呈现即使值是false.

但是,我几乎从不建议根据计算属性的函数内的逻辑设置数据属性的值.它会产生意想不到的,难以调试的副作用,从而导致像您目前遇到的问题.

我建议showImage根据当前在processedSrc计算方法中确定其值的逻辑,使您的属性成为计算属性.然后,您可以确定是否尝试根据值processedSrc计算计算值showImage.

computed: {
  showImage: function() {
    return this.image && typeof this.image === 'object';
  },
  processedSrc: function () {
    if (this.showImage) {
      return this.image.sizes[this.size].file;
    }
  }
}

通过这种方式,可以更轻松地查看影响内容的内容,并且您的代码更易于维护.