life cycle hook 메소드

 

1. Creation: 컴포넌트 초기화 단계

라이프사이클 중에서 가장 처음 실행된다.

아직 Virtual DOM 객체가 생성되지 전이다. (DOM 접근, this.$el 사용 불가)

클라이언트 단과 서버단 렌더링 모두에서 처리해야할 일 구현한다.

컴포넌트 초기에 세팅되어야할 데이터 페치 구현

 

beforeCreate 메소드
컴포넌트 객체가 생성된 직후에 자동으로 호출된다.
아직 컴포넌트의 속성들도 생성되기 전이다.(data, events 사용불가)

created 메소드
컴포넌트 객체가 생성되고, 컴포넌트의 속성들도 만들어진 후에 자동으로 호출된다. (data, events 사용가능)
아직 템플릿, Virtual DOM 객체가 생성되기 전이다.
컴포넌트의 속성들과 관련된 초기화 작업을 구현하기 적당한 곳이다.
최초 한 번 호출된다.

 

2. Mounting: DOM 삽입 단계

초기 렌더링 직전에 DOM을 변경해야할 일 구현한다.

beforeMount
컴포넌트 객체가 생성되고, 컴포넌트의 속성들도 만들어지고, 
Virutal DOM 객체도 만들어진 후에 자동으로 호출된다.
이 메소드를 호출하여 어떤 기능을 구현하는 것은 매우 고급 작업들 뿐이다. 즉 아직 이 메소드는 몰라도 된다.

mounted
컴포넌트 객체가 생성되고, 컴포넌트의 속성들도 만들어지고, 
Virutla DOM 객체도 만들어지고, DOM 객체와 Virtual DOM 객체가 연결된(mounted) 후에 자동으로 호출된다.
DOM 객체와 관련된 초기화 작업을 구현하기 적당한 곳이다.
최초 한 번 호출된다.

beforeUpdate
렌더링 작업 후이고 업데이트 작업 직전에 호출된다.
화면이 변화할 때 마다 호출된다.
화면이 변화하기 직전에 뭔가 추가로 해야할 일이 있다면, 여기에 구현한다.

updated
업데이트 작업 직후에 호출된다.
화면이 변화할 때 마다 호출된다.  //화면이 그려진 직후에 호출
화면이 변화한 직후에 뭔가 추가로 해야할 일이 있다면, 여기에 구현한다.

beforeDestroy
컴포넌트가 파괴되기 직전에 호출된다.
컴포넌트가 파괴될 때 어떤 마무리 작업이 필요하다면, 여기에 구현한다.

destroyed
컴포넌트가 파괴된 직후에 호출된다.
//파괴되어서