VueDevtools에서 VueJS 구성 요소를 클릭할 때까지 렌더링되지 않음

VueDevtools에서 VueJS 구성 요소를 클릭할 때까지 렌더링되지 않음

나는 게시물에 첨부된 피처링 이미지를 확인하기 위해 API를 호출하는 블로그 백엔드의 섹션(SPA가 아닌)에 VueJS 2.5.3을 사용하고 있다.

만약 그것이 하나를 발견하면, 그것은 이미지를 보여주기 위해 자식 구성요소를 사용한다.문제는 API 호출이 성공한 후 하위 구성 요소가 렌더링되지 않아 이미지 개체도 전달되지 않는다는 점이다.

이 GIF에서 볼 수 있듯이 하위 구성 요소가 렌더링되지 않음<!---->, 나는 a를 가지고 있다.v-if이미지의 존재 여부를 확인하기 위해.그러나 Vue DevTools 내부의 child 구성 요소를 클릭하면 child 구성 요소가 렌더링되어 이미지를 예상대로 보여준다.

내 질문은 하위 구성 요소가 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>

부모 및 자식 구성 요소의 코드에 대한 링크:

그 문제는 너의 것이다.PostFeaturedImage.vue구성 요소계산된 값에 의존하는 경우processedSrc데이터 속성을 설정하다showImage.

하지만showImage처음에는false그리고 당신은 그것을 사용하고 있다.v-if루트 요소에 대한 지시즉, Vue는 해당 요소나<img>그 안의 요소

Vue에서 계산된 속성은 느리게 로드되며, 이는 참조될 때까지 기능이 호출되지 않는다는 것을 의미한다.그 이후processedSrc계산된 속성은 에서만 참조되고 있다.<img>요소(그리고 그 요소가 렌더링되지 않기 때문에) 그 방법은 호출되지 않고 있다, 즉showImage재산은 결코 로 정해지지 않다true.

그러나 Vue DevTools에서 구성 요소를 검사하면 계산된 모든 속성이 나열되는데, 이는 다음 구성 요소에 대한 메서드를 의미한다.processedSrc계산된 것은 호출되고, 그리고showImage그 경우에 재산은 설정되고 있다.

---

문제를 해결하는 가장 쉬운 방법은v-show대신에v-if, a 내부 요소 이후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;
    }
  }
}

이렇게 하면 무엇이 영향을 미치는지 보는 것이 훨씬 쉬워지고 당신의 코드는 유지하기가 더 쉬워질 것이다.

참조URL: https://stackoverflow.com/questions/47145971/vuejs-component-wont-render-until-i-click-on-it-in-vue-devtools