[Vue.js][기본 문법2] 9. Lifecycle Hooks

▶ Lifecycle Hooks 

Vue 인스턴스의 생애주기 동안 특정 시점에 실행되는 함수  인스턴스의 생애 주기 중간 중간에 함수를 제공하여  개발자가 특정 단계에서 원하는 로직을 작성할 수 있게 한다

* 참고  https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

 

---

▶ Lifecycle Hooks 예시 

Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후  특정 로직을 수행하기

반응형 데이터의 변경으로 인해  컴포넌트의 DOM이 업데이트 된 후  특정 로직을 수행하기

 

---

▶ Lifecycle Hooks의 특징 

Vue는 Lifecycle Hooks에 등록된 콜백 함수들을 인스턴스와 자동으로 연결한다  이렇게 동작하려면, hooks 함수들은 반드시 동기적으로 작성되어야 한다.  인스턴스 생이 주기의 여러 단계에서 호출되는 다른 hooks도 있으며,  가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUmonunted이다.  * 참고  https://vuejs.org/api/composition-api-lifecycle.html