Vue.js - watch(), beforeCreate(), created(), beforeMount(), mounted(), beforeDestroy()

Vue 라이프 사이클 속성에는 created, beforeCreate, beforeMount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련하여 총 8개의 과정이 있다.

 

라이플 사이클 단계는 크게 인스턴스의 생성, 생성된 인스턴스 화면에 부착, 화면에 부착된 인스턴스 내용 갱신, 인스턴스 소멸 이렇게 4가지로 나뉜다. 

 

beforeCreate : 인스턴스 생성후 가장먼저 실행되는 라이플 사이클 단계로서 data와 method가 정의 되어있지 않은 상태다. 

 

create : beforeCreate라이플 사이클 단계 다음에 실행되는 단계로서 data가 정의 되기 때문에 this함수를 사용하여 로직실행이 가능하다. 

 

beforeMount : created단계 이후 실행되는 단계로서 객체를 병합하는 assign 함수등이 쓰여지는 것을 보았다.

 

mounted: 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로서 화면요소를 제어하는 로직이 수행되기 좋다.

 

beforeDestroy: 뷰 인스턴스가 파괴되기 직전에 호출되는 단계로서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계다.