1. Lifecycle Hooks

• vue 인스턴스의 생성과 소멸의 전 과정 중 단계별 초기화 과정
• 각 단계가 트리거가 되어 특정 로직을 실행

1) Lifecycle Hooks 특징

• instance마다 각각 독립된 Lifecycle을 가지고 있다.
• 부모-자식 관계에서도 부모와 자식 모두 각자 독립된 lifecycle을 가지고 있다.

2) Hooks 종류

위의 다이어그램에서 mounted 단계 이전의 hook들에선 mount전이기 때문에 DOM의 요소와 연결하여 사용할 수 없다.

created

• vue instance가 생성된 후 호출
• data, computed 등의 설정이 완료된 상태
• 서버에서 받은 데이터를 vue instance의 data에 할당하는 로직을 구현하기 적합
• 단, mount 되지 않아 DOM 요소에 접근할 수 없음

mounted

• vue instance가 요소에 mount된 후 호출됨
• mount된 요소를 조작할 수 있음

updated

• 데이터가 변경되어 DOM에 변화를 줄 때 호출됨