Vue.js 공부 기록(13) - 뷰 인스턴스 라이프 사이클 정리 (생명 주기)

🤍beforeCreate

• 인스턴스가 생성되고 나서 가장 처음으로 실행되는 단계.
• 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex.dom)에도 접근할 수 없음.

🤍created

• data 속성과 methods 속성이 정의되었으므로 두 속성값에 접근하는 로직 구현 가능함.
• 하지만 아직 화면 요소에 인스턴스 부착 전이므로 template 속성에 정의된 dom 요소에 접근하는 코드 구현은 불가능.

🤍beforeMount

• render() 함수 호출되기 직전의 단계.
• created 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출되므로 화면에 붙이기 전 실행해야 할 코드를 구현하면 됨.

🤍mounted

• el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 호출되는 단계임.
• template 속성에 정의한 화면 요소에 접근 가능하므로 화면 요소 제어 코드 구현 가능함.
• 이때 주의해야 할 점은 돔에 인스턴스가 부착되는 즉시 호출되므로 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드 변환 시점과 상이할 수 있음

🤍beforeUpdate

• el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 인스턴스 속성들이 화면에 치환됨.
• 이 치환 값을 $watch 속성으로 감시함 -> 데이터 관찰
• 관찰 중인 데이터들이 변경될 경우 가상 돔을 이용해 화면에 다시 그려야 하는데, 이때 그리기 직전 호출되는 단계임. -> 따라서 변경 예정인 데이터 값을 이용해 작업이 필요할 시 그 로직을 이 단계에서 구현하면 됨.
• 값을 변경하는 로직을 구현해도 다시 화면에 그려지지는 않음.

🤍updated

• beforeUpdate 끝난 후 화면에 다시 그리고 나면 실행되는 단계.
• 데이터가 변경되고 화면 요소를 제어하는 것을 구현하고 싶을 때 이 단계에서 작업함.

🤍beforeDestroy

• 뷰 인스턴스가 destroy 되기 직전 호출하는 단계.
• 이 단계에서는 아직 인스턴스가 없어지지 않았으므로 접근 가능하며 뷰 인스턴스의 데이터를 삭제하거나 인스턴스가 사라지기 직전 해야 하는 작업을 구현하면 됨.

🤍destroyed

• 뷰 인스턴스가 destroy되고 난 후 호출되는 단계.
• 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스들 역시 모두 destroy됨.