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 computed属性仅在<img>元素上引用（并且由于该元素未被呈现），因此不会调用其方法，这意味着showImage属性永远不会设置为true 。

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

---

对您的问题最简单的解决方案是使用v-show而不是v-if ，因为v-show元素将被隐藏，但即使值为false也仍然呈现。

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

我建议你的showImage属性也是一个计算属性，基于当前在processedSrc计算方法中确定其值的逻辑。 然后，您可以确定是否尝试计算基于showImage的值计算的processedSrc的值。

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

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