Vue.js에서 구성 요소는 수명 주기에서 여러 단계를 거칩니다. 이러한 단계를 수명 주기 후크라고 하며 이를 통해 구성 요소 수명의 여러 단계에서 사용자 지정 논리를 실행할 수 있습니다. Vue.js의 주요 수명 주기 후크는 다음과 같습니다.
1.
beforeCreate: 이 후크는 새 Vue 인스턴스가 생성되기 직전에 호출됩니다. 반응 데이터 및 이벤트는 아직 초기화되지 않았으며 this에 액세스하여 데이터를 조작하거나 메서드를 호출할 수 없습니다.
2.
created: 이 후크는 Vue 인스턴스가 생성된 후 호출됩니다. 이제 반응 데이터 및 이벤트가 설정되었으며 this를 사용하여 액세스하고 조작할 수 있습니다. 그러나 템플릿과 가상 DOM은 아직 마운트되거나 렌더링되지 않습니다.
3.
beforeMount: 이 후크는 템플릿과 가상 DOM이 실제 DOM에 마운트되기 직전에 호출됩니다. 구성 요소가 아직 렌더링되지 않았으므로 DOM에 액세스하거나 조작할 수 없습니다.
4.
mounted: 이 후크는 구성 요소가 실제 DOM에 마운트된 후에 호출됩니다. 이제 템플릿과 가상 DOM이 렌더링되었으며 this.$el을 사용하여 DOM에 액세스하고 조작할 수 있습니다.
5.
beforeUpdate: 이 후크는 데이터가 변경되고 구성 요소가 다시 렌더링되려고 할 때마다 호출됩니다. DOM은 여전히 이전 상태이므로 이전 값과 새 값을 비교하거나 일부 최적화를 수행할 수 있습니다.
6.
updated: 이 후크는 데이터 변경으로 인해 구성 요소가 다시 렌더링된 후에 호출됩니다. 이제 DOM이 업데이트되었으며 업데이트된 DOM에 의존하는 작업을 수행할 수 있습니다.
7.
beforeDestroy: 이 후크는 구성 요소가 소멸되기 직전에 호출됩니다. 이 후크를 사용하여 이벤트 리스너 제거 또는 타이머 취소와 같은 정리 작업을 수행할 수 있습니다.
8.
destroyed: 이 후크는 구성 요소가 소멸된 후에 호출됩니다. Vue 인스턴스와 모든 속성은 더 이상 작동하지 않으며 액세스하거나 조작할 수 없습니다.
이러한 수명 주기 후크는 수명 동안 구성 요소에 사용자 지정 동작을 추가할 수 있는 기능을 제공합니다. 이러한 후크를 Vue 구성 요소 개체 내부의 메서드로 정의할 수 있습니다.