인프런 커뮤니티 질문&답변
라이프싸이클에 대한 질문
해결된 질문
작성
·
144
1

이번 강의와 좀 무관한 질문입니다..
대충 루트 컴포넌트와 자식컴포넌트를 만들어서 라이플싸이클 훅을 돌려보니
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child mounted
parent mounted
이 순서로 실행이 됩니다.
여기서 궁금한점이
1. 그림에서 Has el option ? 으로 되어있는것이 vue 인스턴스에 el option을 말하는것같은데 만약 없다면 new Vue({}).$mount("app")을 호출한다는 뜻인가요?
2. Create vm.$el and replace 'el' with it <- 이 부분은 인스턴스와 마운트된 태그를 $el에 담겠다는 것 인것같은데.... replace 'el' 에서 'el'이 정확히 어떤 것을 말하는지 궁금합니다.
mounted()에 console.log(this.$el)로 찍어보니 mount된 태그가 나오더라구요. javascript로 따지면 vm.$el = document.querySelector(el) 이니깐 결국 'el'은 뷰옵션인 el : "#app" 의 el을 의미하나요?
3. 자식이 Created 될때 Has el option ? 부분에서는 어떻게 동작하는지 궁금합니다. 자식컴포넌트에서는 el option이 명시되어있진 않지만 싱글파일 컴포넌트의 template부분을 el로 알아서 잡는건지 ..
답변 1
0
안녕하세요 dongwoo님, 답변 드리겠습니다 :)
1. 네 el 이 없으면 대체재로 $mount() API를 찾습니다.
2. el은 element의 약자이고 인스턴스 옵션 속성에도 el 속성으로 존재합니다.
3. 싱글 파일 컴포넌트를 사용하는 경우는 대부분 뷰 CLI로 프로젝트를 생성해서 사용하시게 될텐데 그러면 main.js에 있는 인스턴스에 $mount() API로 인스턴스를 부착해서 화면을 그리게 됩니다:)





