Vue.js - 뷰 라이프 사이클 메서드

 

 

 

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

특징 : 화면 요소에 접근 불가능. data 속성 또는 method 속성이 아직 인스턴스에 정의되어 있지 않음.

 

2. created : beforeCreate 다음으로 실행되는 단계.

특징 : data 속성 및 methods 속성의 접근 가능. 아직 DOM 객체 접근 불가능(template 속성 접근 x)

 

3. beforeMount : created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 한 후 el 속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계

특징 : render() 함수가 호출되기 직전의 로직을 추가하는 것이 좋음.

 

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

특징 : DOM에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계.

 

5. beforeUpdate : 데이터가 변경되면 가상 DOM으로 화면을 다시 그리기 전에 호출되는 단계.

특징 : 변경 예정인 새 데이터에 접근이 가능하여 변경 예정 데이터의 값과 관련된 로직을 미리 추가 할 수 있음.

 

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

특징 : 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 위한 좋은 단계.

 

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

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

 

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

특징 : 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들이 모두 파괴됨.

 

 

 

 

 

 

 

출처 : Do it! Vue.js 입문