Vue.js - 라이프 사이클 개념

인스턴스 라이프 사이클(Life Cycle) 개념

 

인스턴스 라이프 사이클이란?

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(Hook)이라고 한다.

 

beforeCreate

• Vue 인스턴스가 생성되고 나서 처음으로 실행되는 라이프 사이클 단계, data속성과 method 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근할 수 없는 상태이다.

 

created

• data속성과 method 속성이 정의 되어있는 단계 떄문에 this.data 또는 this.fetchData() 와 같은 로직을 이용해서 data속성과 method 속성에 정의된 값에 접근 가능

 

beforeMount

• template속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계를 말한다.
• 이 속성은 render() 함수가 호출 되기 직전의 로직을 추가할 때 사용하면 좋다.

 

mounted

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

 

beforeUpdate

• watch 로 데이터가 변경되면 가상 돔으로 화면을 다시 그리기전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다는 특징이 있다.

 

updated

• 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계이다.
• 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 적절한 단계

주의 할점은 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 변경하려면 computed 또는 watch와 같은 속성을 사용해야한다.

 

beforeDestroy

• 뷰 인스턴스가 소멸되기 직전에 호출되는 단계이다.
• 이 단계에서는 아직 인스턴스에 접근 가능, 뷰 인스턴스의 데이터를 초기화 적절한 단계

 

destroyed

• Vue 인스턴스가 소멸된 후에 호출되는 단계

 

 

 

 

 

 

출처 : https://jeongkyun-it.tistory.com/137