강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

열씨미살자!님의 프로필 이미지
열씨미살자!

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

스피너 실행 및 종료 시점 알아보기

라이프싸이클에 대한 질문

해결된 질문

작성

·

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로 인스턴스를 부착해서 화면을 그리게 됩니다:)

열씨미살자!님의 프로필 이미지
열씨미살자!

작성한 질문수

질문하기