[개념] 라이프 사이클 (Life-Cycle) 정리 (Vue.js)

반응성(형)

: vue instance 내 data 옵션에 미리 정의되어 있는 값만 가지게 된다.

-> 당장 필요하지 않은 data 라도 반응성을 가지게 하려면, vue instance가 생성될 때 정의가 되어 있어야 한다는 점!

---

라이프 사이클 (Life-cycle)

* 표기 : 많이 쓰임.

1) beforeCreate

vue instance 생성 전 상태이므로, "data" 정의 시 undefined가 선언된다.

 

-

이 사이에 반응성(형)이 주입된다.

-

 

2) * created

vue instance 생성 후 상태이므로, "data" 정의 시 선언한 값이 나타난다.

3) beforeMount

html과 vue instance가 연결되기 직전인 상태로, html의 요소가 무엇인지 모르므로 refs의 값이 undefined가 정의된다.

 

4) * mounted

html과 vue instance가 연결된 상태로, refs의 값이 선언한 값이 나타난다.

html의 특정한 요소를 제어하고 싶을 때 해당 훅에서 작업을 해야한다.

 

update : 데이터가 변경될 때 실행된다.

 

5) beforeUpdate

data가 변경되고 나서 화면에 렌더링 되기 직전에 실행되는 상태이므로, 원래의 data가 찍힌다.

 

6) updated

화면이 다시 렌더링되고 실행 (가상돔 Virtual-DOM)되므로 변경된 data가 찍힌다.

 

7) beforeDestroy

data가 없어지기 직전의 상태로, data를 백업해두는 작업이 필요할 때 사용할 수 있다.

 

8) destroyed

실행 시 vue instance가 파괴되므로 반응성(형)이 사라진다.

-> vue instance가 구지 안 필요한데, 메모리를 잡아먹고 있을 때 사용하면 유용.

 

참고강의(유료) :

패스트캠퍼스 - Vue.js 압축 완성 올인원 패키지 Onlne. 2강 Vue 가이드 문서 따라하기 Ch 03. Vue 가이드 - 03. 라이프 사이클 - 1, 2