25. understanding lifecycle hooks
내용
이 글은 Vue.js의 라이프사이클(lifecycle)에 대한 설명입니다.
라이프사이클은 Vue 인스턴스가 생성되고, 작동하며, 파괴될 때까지의 과정을 말합니다.
먼저, createApp 함수를 사용하여 인스턴스를 생성합니다.
이 과정에서 데이터에 반응성을 추가하고, beforeCreate와 created 라이프사이클 훅(hook)을 사용하여 코드를 실행할 수 있습니다.
created 훅에서는 데이터와 메소드에 접근할 수 있지만, 아직 템플릿이 마운트되지 않았습니다.
다음 단계에서 Vue는 템플릿을 찾고 컴파일합니다.
beforeMount와 mounted 훅을 사용하여 마운트 과정에 코드를 삽입할 수 있습니다.
mounted 훅은 템플릿이 문서에 삽입되고 나서 실행됩니다.
이후, 데이터 변경에 따라 템플릿이 업데이트되는 과정에서 beforeUpdate와 updated 훅을 사용할 수 있습니다.
마지막으로, 인스턴스를 파괴하는 과정에서는 beforeUnmount와 unmounted 훅을 사용합니다.
unmount 메소드를 호출하면 인스턴스는 파괴되고, 모든 반응성, 이벤트, 지시문(directives) 및 바인딩은 비활성화됩니다.
이 글은 Vue 라이프사이클의 전반적인 과정과 각 단계에서 사용할 수 있는 훅들에 대해 설명하고 있습니다.
- 인스턴스 생성: createApp 함수를 사용하여 Vue 인스턴스 생성.
- 데이터에 반응성 추가: 인스턴스 생성 과정 중 데이터에 반응성을 추가.
- beforeCreate 훅: 인스턴스가 완전히 생성되기 전에 코드를 실행.
- created 훅: 인스턴스가 생성된 후, 데이터와 메소드에 접근 가능. 템플릿은 아직 마운트되지 않음.
- 템플릿 찾기 및 컴파일: Vue가 템플릿을 찾고 컴파일하는 과정.
- beforeMount 훅: 마운트 과정 전에 코드를 삽입.
- mounted 훅: 템플릿이 문서에 삽입된 후 실행. 이 시점에서 템플릿이 렌더링됨.
- 데이터 변경에 따른 템플릿 업데이트: 데이터가 변경되면 템플릿 업데이트.
- beforeUpdate 훅: 데이터가 업데이트된 후, 템플릿에 적용되기 전에 실행.
- updated 훅: 템플릿이 업데이트된 데이터로 패치된 후 실행.
- 인스턴스 파괴 과정: unmount 메소드 호출로 인스턴스 파괴.
- beforeUnmount 훅: 인스턴스가 파괴되기 전에 실행.
- unmounted 훅: 인스턴스가 파괴된 후 실행, 이 시점에서 인스턴스는 더 이상 접근 불가.
- Vue.createApp().mount()
beforeCreate
- Initialize data and methods
- Instance Created -
created - Compile Template (el Property)
beforeMount
- Replace el property with compiled template -
mounted - Data Changes
beforeUpdate
- Apply changes to the template -
updated-> 5번 vm.unmount()beforeUnmount
- Vue instance destroyed -
unmounted