Vue.js 라이프 사이클 훅

Vue.js의 컴포넌트 생명주기는 컴포넌트가 생성되고, 업데이트되며, 파괴되는 과정을 관리합니다.
각 생명주기 단계에서 특정한 작업을 수행할 수 있는 '라이프사이클 훅'을 제공합니다. 이 훅들을 이용하면
데이터를 불러오거나, DOM을 조작하고, 타이머를 설정하거나 제거하는 등의 작업을 적절한 시점에 수행할 수 있습니다. Vue.js에서는 주로 아래와 같은 주요 라이프사이클 훅들을 제공합니다:

1. beforeCreate: 컴포넌트가 생성되기 직전에 호출됩니다. 이 시점에서는 데이터와 이벤트가 아직 설정되지 않아 데이터에 접근하거나 이벤트를 사용할 수 없습니다.
2. created: 컴포넌트가 생성된 직후에 호출됩니다. 이 시점에서는 데이터와 메서드가 활성화되어 있으므로, API 호출을 통해 데이터를 불러오는 작업 등을 실행할 수 있습니다. 하지만 아직 컴포넌트가 DOM에 부착되기 전이므로 DOM을 조작할 수는 없습니다.
3. beforeMount: 컴포넌트가 DOM에 부착되기 직전에 호출됩니다. 이 시점에서는 컴포넌트의 template나 render 함수가 컴파일된 결과가 생성되지만, 아직 화면에 렌더링되기 전입니다.
4. mounted: 컴포넌트가 DOM에 부착된 직후에 호출됩니다. 이제 컴포넌트가 화면에 렌더링되었으므로, DOM을 조작하거나, 이벤트 리스너를 추가하는 등의 작업을 수행할 수 있습니다. 대부분의 초기화 작업은 이 단계에서 이루어집니다.
5. beforeUpdate: 데이터가 변경되어 화면이 업데이트되기 전에 호출됩니다. 이 훅을 이용하면 새로운 데이터에 기반한 필요한 계산이나 조건을 처리할 수 있습니다.
6. updated: 데이터가 변경되어 화면이 업데이트된 후에 호출됩니다. 이 훅은 데이터 변경 후 DOM이 업데이트된 상태이므로, 업데이트된 DOM을 기반으로 추가적인 작업을 수행할 수 있습니다.
7. beforeDestroy: 컴포넌트가 제거되기 직전에 호출됩니다. 이 훅에서는 타이머를 제거하거나, 컴포넌트가 사용하고 있던 이벤트 리스너를 정리하는 등의 정리 작업을 수행할 수 있습니다.
8. destroyed: 컴포넌트가 제거된 후에 호출됩니다. 이 시점에서는 컴포넌트의 모든 디렉티브가 바인딩 해제되고, 이벤트 리스너가 제거되며, 반응형 시스템이 해체됩니다.