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;
    }
  }
}

通過這種方式，可以更輕松地查看影響內容的內容，並且您的代碼更易於維護。