[vue.js] Vue Instance Life Cycle

▣ 배경

• Vue Instance는 객체로 생성되고, 데이터 관찰 기능을 설정하는 등의 작업을 위해 초기화를 수행한다.
• 이를 라이프 사이클이라 하는데 각 Step에서 Hook 메소드를 통해 중간 처리를 진행할 수 있다.

▣ Life Cycle Diagram

▣ 라이프 사이클 정의

라이프 사이클 훅	설명
beforeCreate	Vue 인스턴스가 생성될 때 가장 처음으로 실행되는 훅이다. 아직 데이터와 이벤트는 아직 생성되지 않아 접근할 수 없는 단계이다.
created	created 훅은 beforeCreate 훅의 다음단계로 beforeCreate 훅이 호출된 직후 데이터와 이벤트가 초기화 되어 create 훅에서는 데이터와 이벤트에 접근할 수 있다. 그러나 아직 DOM이 마운트되지 않았으므로, 인스턴스의 DOM에 접근하는 $el 속성을 사용할 수 없는 상태이다. 주로 API 서버 데이터를 미리 받아올 때 사용한다.
beforeMount	beforeMount 훅 이후부터는 컴포넌트에 접근할 수 있다. DOM에 마운트되지 않은 상태이기 때문에 아직은 $el 속성을 통해 인스턴스의 DOM에 접근할 수 없는 상태이다.
mounted	인스턴스의 Render와 DOM Mount 가 끝난 상태이다. $el 속성을 사용하여 인스턴스의 DOM에 접근할 수 있게 된다. 만약 그래프와 같은 DOM 관련 라이브러리를 사용하는 경우 해당 훅에서 Render 하면 된다.
beforeUpdate	컴포넌트가 마운트가 다 된 후, 데이터의 변화가 감지됐을 때 해당하는 데이터와 관련있는 DOM을 업데이트 하기 전에 호출된다. Virtual DOM과 연관 깊은 훅으로 vue.js는 데이터가 변경됨에 따라 변경된 데이터를 Virtual Dom 적용한다. Virtual DOM 에 적용된 DOM을 렌더링하기 전에 호출되는 훅으로 이 과정에서 데이터가 변경되더라도 다시 렌더링 되지 않는다
updated	updated 훅은 Virtual DOM이 재렌더링되어 실제 DOM이 되었을때 호출된다. 데이터가 변경된 후 DOM까지 모두 반영되었으므로 DOM 접근이 가능하다. 전체컴포넌트 렌더링을 보장하려면 vm.$nextTick 을 활용해야 한다.
beforeDestroy	Vue 인스턴스가 제거되기 전에 실행된다.
destroyed	Vue 인스턴스가 제거된 후 실행된다.

▣ 기타

전체컴포넌트의 렌더된 상태를 보장하는 방법

• mounted 훅은 현재 인스턴스의 마운트가 끝났다는 의미이다.
• 이는 자식컴포넌트까지 모두 마운트가 끝났음을 보장하지 않는다.
• 전체 컴포넌트가 렌더된 상태를 보장하려면 vm.$nextTick 메소드를 사용한다.