📗 Vue.js
Vue - 라이프사이클
zunwon
2023. 11. 24. 15:07
라이프사이클 훅
각 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)와 연결이 해제된 이후의 라이프사이클