아무쪼록 만나서 반갑습니다.
엔지니어 1년째의 ㅎㅎ 입니다.

이번에는 어드벤드 캘린더가되는 것에 초대를 받았으므로,
무거운 허리를 올리고 qiita 첫 투고를하기로 결심했습니다!

현재 안건으로 Vue를 이용한 프런트 엔드 개발을 담당하고 있습니다만,
리로드를 걸었을 때나 화면 천이했을 때의 화면 표시시에, 작은 요소가 먼저 표시되어 버리는 현상에 빠져 버렸습니다.
그래서 이번에는 최소한의 Vue 파일에 컴퍼넌트를 가지게 해, 묘화가 행해지는 순서에 대해서 확인해 가고 싶습니다.

사용한 파일

VueCLI로 만든 프로젝트를 사용합니다.
이번에는 기존의 App.vue를 아래와 같이 하고 components하하에도 같은 클래스를 맞춘 컴포넌트를 준비했습니다.
또한 child1 구성 요소 내에서 childA 구성 요소를 호출하는 구성을 취하고 있습니다.
그리고 각 vu 파일의 mounted에 console.log를 넣고 있습니다.

App.vue

<template>
  <div class="parent">
    {{text}}
    <child1/>
    <child2/>
  </div>
</template>

<script>
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'

export default {
  components: {
    child1,
    child2
  },
  data(){
    return {
      text: "parent"
    }
  },
  mounted: function(){
      console.log('parent')
  }
}
</script>

<style scoped>
  .parent{
    border:solid black
  }
</style>

실제로 브라우저에 표시시켜 보면 다음과 같이 됩니다.
극한으로 간단합니다.

실행 결과

이제 콘솔 화면을 열고 다시 로드해 봅시다.
결과는 ...


무려! 손자 구성 요소 인 childA 구성 요소에서 그려집니다 ...
이것은 작은 요소로부터 그려져 버리는데도 납득입니다.

힘든 점

· Unexpected console statement (no-console)라는 수수께끼 오류
App.vue에 설치한 console.log로 인한 오류입니다.
조사한 바에 의하면 VueCLI로 프로젝트를 작성했을 때에 디폴트의 설정을 이용한 결과로서 ESlint도 인스톨 되어, 그 초기 설정으로 no-console가 유효하게 되어 버린 것 같습니다.
설정을 괴롭히는 것도 있습니다만 이번은 번거로움을 이기지 않고 커스텀 설정으로 프로젝트 작성을 재차 해결했습니다.
· child1 내에서 cilldA 가져 오기가 잘못되는 문제
같은 계층에 있는 파일이므로 "import childA from 'childA.vue'"라고 쓰고 있었습니다만 "import childA from './childA.vue'"로 할 필요가 있었던 것 같습니다.

추가

아이 컴퍼넌트의 코드에 대해서 코멘트 받았으므로 붙여 둡니다. child2는 child1의 숫자와 border의 색상을 바꿨습니다!

child1.vue

<template>
    <div>
        {{text}}
        <childA/>
    </div>
</template>

<script>
import childA from './childA.vue'

export default {
    components: {
        childA,
    },
    data(){
        return {
            text: "child1"
        }
    },
    mounted: function(){
        console.log('child1')
    }
}
</script>

<style scoped>
    div{
        border:solid blue
    }
</style>

childA.vue

<template>
    <div class="childA">
        {{text}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            text: "childA"
        }
    },
    mounted: function(){
        console.log('childA')
    }
}
</script>

<style scoped>
    div.childA{
        border:solid gray
    }
</style>

마지막으로

어땠습니까?
똑같이 Vue의 묘화 처리에 고생하고 있는 분의 도움이 되면 다행입니다.

그렇다고 해도 자신이 고민한 것을 문장화한다는 것은 매우 어려운 작업이군요. (원래 자신이 고민하고 있는 상태인지 판단하기도 어렵다고 느끼고 있습니다만...)
일상적으로 qiita 투고라고 하지 않을 때까지도 고민을 세분화해 정리하는 작업은 하고 싶은 나름입니다.

다음 번은 @shg_shg 님의 투고입니다!