Vue 생성 주기

Vue의 생성 주기는 크게 Create, Mount, Update, Destroy 네 가지로 구분

Create

• Vue 인스턴스의 생성 시작

• 컴포넌트들이 DOM에 추가되기 전이기 때문에, DOM에 접근 불가

• 서버 사이드 렌더링 적용 시 서버 사이드에서도 실행 가능한 단계

• beforeCreate() → data() → created() 순으로 실행되며 created에는 메서드나 변수를 접근해도 에러가 발생하지 않는다.

• 아직 템플릿과 가상 DOM에는 접근 불가

• beforeCreate에 this.onClick() 메서드를 호출하면 에러가 나지만, created에는 에러가 발생하지 않는다.

beforeCreate

• 제일 먼저 실행되는 훅

• 인스턴스 생성 되기 전

• 이벤트와 lifecycle 초기화

• 데이터(data) 접근 불가

• data()와 이벤트 methods가 정의되지 않아서 화면 요소에 접근 불가

ex) 만약 count : 5를 만들어놨으면 beforeCreate에선 읽을 수 없다. beforeCreate과 created 사이에 초기화가 일어나기 때문이다.

created

• 초기화, 만들어놓은 데이터, 반응성이 만들어지는 과정

  • 반응성(reactivity)
    • 뷰가 데이터 변화를 감지하고 자동으로 화면을 갱신하는 특성
    • 반응성이 없으면 해당 객체의 변화가 있든 없든 뷰에서 화면을 다시 갱신하지 않는다.

• data()와 이벤트 methods가 정의되어서 두 속성에 접근 가능

• 인스턴스 생성 된 후

• 데이터(data) 접근 가능, 이벤트 사용 가능

• 아직 화면 요소에 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근하는 코드 구현 불가

• beforeCreate와는 다르게 injection 이후에 이루어져서 데이터나 이벤트들을 사용 가능

• Template과 가상 DOM이 마운트 및 렌더링되지 않은 시점

여기서 count : 5 해당 내용 확인 가능
컴포넌트가 생성되기 직전과 생성된 직후를 구분하는게 beforeCreate, created

Mount ( 장착 )

• beforeMount → 실제 html 구조 연결( ex) <'template>{{onTemplate() => 템플릿 실행}} </template'>) → mounted 순으로 실행됨

• 렌더링 직전의 컴포넌트에 접근 가능

• 이 단계부터는 서버 사이드에서 호출되지 않기에 접근할 수 없음

beforeMount

• html 태그를 등록 ( template 태그가 실행된 후 실행됨 )

• 아직 html 요소 안보임

• render() 함수가 호출되기 직전의 단계 (렌더링 직전)

• 화면에 붙이기 전 실행햐야 할 코드 구현

• 만약 초기 렌더링 직전에 DOM을 변경하고자 한다면 beforeMount를 활용해야 한다.

• 하지만 컴포넌트 초기에 설정해야 할 데이터들은 created 단계에서 해야 한다.

• created 이후에 분기 처리가 되는데 template 옵션을 사용하는 여부에 따라 YES와 NO로 나눠져서 처리됨.

• beforeMount 뒤에 연결이 되어야 화면에 출력할 수 있음.

mounted

• 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계

• 화면이 DOM에 접근이 가능해서 html 요소가 보임

• 화면 요소 제어 가능

• DOM이 메모리에 생성되고 렌더링 된 이후에 실행

• 주의! 부모와 자식 관계에서 컴포넌트를 렌더링 할 때 자식 컴포넌트가 부모 컴포넌트보다 먼저 mounted가 실행됨

• DOM에 인스턴스가 부착되자마자 호출되어서 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드와는 조금 다를 수 있음.

Update ( 수정 )

• 컴포넌트가 데이터가 변해서 리렌더링 될 때 실행됨

• 데이터가 수정된 후 화면에 그려지기 전은 beforeUpdate, 화면에 그려지면 updated

beforeUpdated

• DOM이 리렌더링 되기 전에 실행

• 변경 예정인 데이터 값을 이용해 작업을 해야할 때는 beforeUpdated에서 하는게 맞지만, 변경하는 로직을 여기서 구현해도 다시 화면에 그려지지는 않는다.

updated

• 리렌더링 이후에 실행. DOM과 관련된 로직 처리가 가능

• 데이터가 변경된 후 화면 요소를 제어하고 싶을 때 이 단계에서 로직 구현

• 하지만 beforeUpdate -> updated -> beforeUpdate 무한루프될 가능성이 있어 조심!

Destroy ( 소멸 unmount )

beforeDestroy ( beforeUnmount )

• 소멸 (컴포넌트 제거) 되기 직전에 호출된다.

• 아직 인스턴스가 없어지지 않았기 때문에 접근 가능

• 인스턴스의 데이터 삭제 혹은 인스턴스가 사라지기 직전에 해야하는 작업 구현

• 컴포넌트가 기본 모습과 기능을 그대로 가지되, 이벤트와 같은 부분을 제거할 때 beforeDestroy를 사용

destroyed ( unmounted )

• 인스턴스가 destroy된 이후 호출된다

• 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스 모두 destroy됨