vue.js - VueJS 组件只有在我在 Vue Devtools 中点击它时才会呈现

Question

我在博客后端的一个部分(不是 SPA)上使用 VueJS 2.5.3，该部分调用 API 来检查附加到帖子的特色图片。

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

As you can see in this 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>

And here is a link to the code for the parent and child components:

Answer 1

问题出在您的 PostFeaturedImage.vue成分。您依赖于计算值 processedSrc设置数据属性 showImage .

然而，showImage最初是 false你在 v-if 中使用它根元素上的指令。这意味着 Vue 不会渲染该元素或 <img>。它里面的元素。

Vue 中的计算属性是延迟加载的，这意味着它们的函数在被引用之前不会被调用。自 processedSrc计算属性仅在 <img> 上被引用元素(并且因为该元素没有被渲染)它的方法没有被调用，这意味着 showImage属性永远不会设置为 true .

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

---

解决您问题的最简单方法是使用 v-show而不是 v-if ，因为 v-show 中的元素将被隐藏，但即使值为 false 仍会呈现.

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

我建议您制作 showImage property 也是一个计算属性，基于当前在 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;
    }
  }
}

这样，就可以更容易地看到是什么在影响什么，并且您的代码也将更容易维护。