[Vue.js] 뷰 인스턴스 생명주기(Life Cycle)

인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(Life cycle)라고 합니다.

그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(Life cycle hook)이라고 합니다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가집니다.

생명주기 종류

1. Creation (생성)

2. Mounting (장착)

3. Updating (수정)

4. Destruction (소멸)

1. Creation (생성)

- beforeCreate()

: 라이프사이클 중에서 가장 맨처음 실행

(아직 컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근을 하게 되면 에러가 발생)

- created()

: data()변수와 events 메서드가 활성화 되어 접근 가능

'컴포넌트 초기에 설정해야 할 데이터들은 해당 단계에서 사용'

 

2. Mounting (장착)

- beforeMount()

: <template> 태그가 실행 된 후에 실행. 탬플릿과 렌더 함수들이 컴파일 된 후에 첫 렌더링이 일어나기 직전에 실행

'초기 렌더링 직전에 DOM을 변경하고자 한다면 이 생명주기를 활용하면 됨'

- mounted()

: 탬플릿과 렌더링 된 돔에 접근 할 수 있는 단계

 

3. Updating (수정)

- beforeUpdate()

: 컴포넌트가 데이터가 변하여 업데이트가 시작될 때 실행

'DOM이 재 랜더링 되고 패치되기 직전에 실행, 재 랜더링 전의 새 상태의 데이터를 얻을 수 있음'

- update()

 : 컴포넌트가 데이터가 변하여 재 랜더링이 일어난 후에 실행

'DOM이 업데이트가 완료된 상태이며 연산과 기능 수행 가능'

 

4. Desctruction (소멸)

- beforeDestroy()

: 소멸(뷰 컴포넌트 제거)되기 직전에 호출

'컴포넌트 기본 모습과 기능을 그대로 가지고 있으며, 이벤트와 같은 부분을 제거할 떄 해당 생명주기를 활용

- destroyed()

: 소멸 된 후에 호출

'Vue의 모든 directive(v-)가 바인딩 해제되고 모든 이벤트 리스너가 제거되며 모든 하위 컴포넌트도 삭제'