[Vue.js] 뷰 인스턴스 라이프 사이클 정리

뷰 인스턴스 라이프 사이클 정리

[인스턴스 생성]

* beforeCreate

 - 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계.

 - data, methods 속성이 아직 인스턴스에 정의되지 않고, 돔과 같은 화면 요소에도 접근 불가.

* created

 - data, methods 속성 정의된 단계. template 속성에 정의된 돔 요소로 접근 불가.

 - 서버에 데이터를 요청하여 받아오는 로직을 수행할 수 있는 단계.

* beforeMount

 - template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 화면 요소(돔)에 부착 전 호출 되는 단계.

 - render() 함수가 호출되기 직전의 로직을 추가하기 좋은 단계.

* mounted

 - el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계.

 - template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소 제어 로직 수행하기 좋은 단계.

[ 인스턴스를 화면에 부착 ]

* beforeUpdate

 - el 속성에서 지정한 화면 요소에 인슽턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환.

 - 가상 돔으로 화면을 다시 그리기 전 호출 단계.

 - 변경 예정인 데이터 값과 관련된 로직 미리 넣을 수 있음.

* updated

 - 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계.

 - 데이터 변경 후 화면 요소 제어와 관련된 로직 추가하기 좋은 단계.

[ 인스턴스 내용 갱신 ]

* beforeDestroy

 - 뷰 인스턴스가 파괴되기 직전에 호출되는 단계.

 - 아직 인스턴스에 접근 가능.

 - 뷰 인스턴스의 데이터를 삭제하기 좋은 단계.

* Destroyed

 - 뷰 인스턴스가 파괴되고 나서 호출되는 단계.

[ 인스턴스 소멸 ]

참조 서적 : Do it! Vue.js 입문