Q. Vue의 생애주기에 대해 설명해주세요.
A. 라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어집니다. 그리고 각 단계사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됩니다.
- Created
-
beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 단계에서는 data속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없습니다.
-
created : beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다. data 속성과 methods 속성이 정의되었기에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다.
- Mounted
-
beforeMount : created 단계 이후 template속성에 지정한 마크업 소속성을 render() 함수로 변환한 후 el속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계입니다.
-
mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다.
- Update
-
beforeUpdate : el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다.
-
updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계입니다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점으로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하는 단계입니다.
- Destroy
-
beforeDestroy : 뷰 인스턴스가 파괴되지 직전에 호출되는 단계입니다.
-
destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 모두 파괴됩니다.
- 출처
Do it! Vue.js 입문 도서(http://www.easyspub.co.kr/20_Menu/BookView/185/PUB)
