Vue 라이프사이클 훅

YuJin Lee·2022년 8월 19일
0

beforeCreate

Vue 인스턴스 초기화 직후 발생
DOM 추가되기 전이므로 this.$el 접근 불가
data, event, watcher에도 접근하기 전이므로 data, moethods에도 접근 불가

created

data를 반응형으로 추적 가능
computed, methods, watch 등 활성화되어 접근 가능
DOM에는 추가되지 않은 상태
컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너 선언해야 할 때 이 단계에서 한다.

beforeMount

DOM에 부착하기 직전에 호출
템플릿 렌더링 한 상태이므로 가상 DOM은 생성되어 있으나 실제 DOM에 부착되지 않은 상태

mounted

가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행
this.el을비롯해data,computed,methods,watch등모든요소에접근가능mounted는모든자식컴포넌트가마운트되었음을보장하지않는다.전체화면이렌더링될때까지기다리려면mounted내에서vm.el을 비롯해 data, computed, methods, watch 등 모든 요소에 접근 가능 mounted는 모든 자식 컴포넌트가 마운트되었음을 보장하지 않는다. 전체 화면이 렌더링될 때까지 기다리려면 mounted 내에서 vm.nextTick을 사용해야 한다.

profile
배운 것을 기록하는 곳 💻🙂

0개의 댓글