[Vue] vue의 생명주기

vue의 생명주기

주로 사용하는 created, mounted는 많이 사용해봤지만,

다른 생명주기 요소에 대해 제대로 알지 못해

이번 참에 공부를 하며, 정리를 하자.

 

vue의 생명주기를 한 눈에 볼 수 있게 만든 사진(공식사이트에 있음)

1. creation 단계

1) beforeCreate()

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

vue의 인스턴스가 생성된 직후!!!

컴포넌트가 dom에 추가되기 전

→ 어떤 컴포넌트가 어떠한 template(dom, html)안에 부착되기 전임.

즉, dom에 접근 아예 못함. data, methods, watch 속성에도 접근 못함. (아직, data, methods 등이 생성되지 않은 시점이기 때문)

 

2) created()

얘도 beforeCreate()처럼, dom에 접근 못함. but data, methods, watch 등등 vue 컴포넌트 안에서는 접근 가능함.

보통, data를 초기화 할때 자주 사용하거나, 이벤트리스너(또는 이벤트버스)를 받을 때 자주 사용.

 

 

2. Mount 단계

 

1) beforeMount()

dom에 vue 컴포넌트를 장착하기 직전!(<template>이 딱 렌더링 될때) 호출

<template>태그가 실행될때, 실행

// beforeMount()→ <template> → </template> → mounted()

그래서 이때의 dom은 진짜 dom이 아닌 가상 dom.

보통 이때는 dom을 변경하고 싶을 때 사용(사실 어떨때 사용해야 하는지 감이 안잡힘)

data 초기화 하고 싶은 경우는 beforeMount() 대신 created()로.

 

2) mounted()

dom이 렌더링 된 후 실행→ dom의 el 요소에 접근이 여기서부터 가능하다~~

child 컴포넌트가 있을 경우 child 컴포넌트의 mounted()까지 기다렸다가 실행된다.

다만, child 컴포넌트가 비동기로 데이터를 받아올 경우, child의 mounted()까지 기다리지 않을 수 도 있음 → 보장되어야 할 경우

"this.$nextTick"을 이용한다.

 

 

3. Update 단계

 

1) beforeUpdate()

데이터가 변경되어 업데이트를 시작할 때 실행되며, 아직 그 변경된 값에 대한 렌더링 전 상태이다.

data변경→ beforeUpdate()→ 렌더

 

2) updated()

data가 변경되어 렌더링 후 실행

data 변경 → beforeUpdate() → 렌더링 → updated()

updated()에서 data를 변경하면 무한루프에 빠질 수 있다..(주의)

모든 child의 렌더링 상태를 보장하지 않기 때문에

보장이 필요한 경우 this.$nextTick 사용.

 

 

4. Destory 단계

 

1) beforeDestory()

해당 인스턴스가 해체되기 직전에 beforeDestory() 호출.

보통 이벤트리스너를 해제

당연, 모든 속성에 접근 가능

 

2) destoryed()

인스턴스가 해체되고 나서~~ 호출됨.

해체되어서 vue 컴포넌트 속성들에 접근 못함..

당연 child도 마찬가지임.