Vue - 라이프사이클

라이프사이클 훅

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 이 과정에서 라이프사이클 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다

---

라이프사이클 다이어그램

• beforeCreate : Vue 애플리케이션이 만들어지기 전에 실행되는 라이프사이클
• created : Vue 애플리케이션이 만들어진 직후 실행되는 라이프사이클
• beforeMount : Vue 애플리케이션이 HTML 구조와 연결되기 직전의 라이프사이클
• mounted : Vue 애플리케이션이 HTML 구조(DOM)와 연결된 직후의 라이프사이클
• beforeUpdate : 데이터를 수정하고 화면이 업데이트되기 직전에 실행되는 라이프사이클
• updated : 데이터를 수정하고 화면이 업데이트가 된 후 실행되는 라이프사이클
• beforeUnmount : Vue 애플리케이션이 HTML 구조(DOM)와 연결이 해제되기 직전의 라이프사이클
• unmounted : Vue 애플리케이션이 HTML 구조(DOM)와 연결이 해제된 이후의 라이프사이클

 

참고 : https://ko.vuejs.org/guide/essentials/lifecycle.html