라이프 사이클 다이어그램
1. Vue.create라는 메서드를 통해서 프로젝트를 실행함
1-1 . mount라는 메서드를 통해 실제 html구조에 연결함
2. vue.js의 이벤트나 라이프사이클이(event & lifecycle) 초기회됨(2번 과정 직후에 어떤 내용을 실행해야한다면 before create hook에서 실행해주면 됨)
2번의 과정이 끝나면 beforeCreate라는 life cycle hook이 실행이 됨 // 내가 이해하기로는 2번의 과정(라이프 사이클 초기화)끝난 이후에 실행할 것이 없으면 실행이 안된다고 이해함
-
injections&reactivity가 초기화됨 이 과정에서는 우리가 만들어 놓은 데이터라든가 기본적인 반응성이 만들어지는 과정이라고 할 수 있음(ex) count라는 데이터를 만들었으면 count : 4 <= 이런 건 beforeCreate에서 읽을 수 없음 why? count라는 데이터는 3번의 과정에서 초기화가 되기 때문임 데이터를 확인 하려면 created라는 lifecycle hook에서 확인 할 수 있음)
3의 과정이 끝나면 created 라는 lifecylcle hook이 실행이 됨 -
template 이라는 option 을 사용 여부에 따라 로직이 달라짐
-
4의 로직을 거친 이후 실제 html의 구조부분에 연결을 함(app.$el에 연결)
5의 과정 직전에 beforeMount 라는 lifecycle hook이 실행이 됨
5의 과정 직후에는 mounted 라는 lifecycle hook이 실행이 됨 -
mounted라는 life cycle hook이 실행되고 난 후 실제로 연결이 되어진 상태에서는 어떻게 동작하는가?
데이터를 수정하자마자 beforeUpdate라는 life cycle hook이 실행이 됨 직후에 Virtual DOM에서 그려져있는 데이터과 그려야할 데이터를 비교분석하는 작업을 함(이게 반응성이라는 개념과 밀접함) -> re-rendered를 통해서 다시 그리게됨 이후 updated라는 life cyclehook 이 연결되어 실행됨 -
app.unmount() 를 실행하게 되면 vue.js 로 작성한 component의 연결이 끊어지게 됨
component의 연결이 끊어지기 전에 beforeUnmount라는 lifecycle hook이 실행됨 => 이후 실제로 끊어지게 되면 unmounted 라는 lifecycle hook이 실행됨
중요한 lifecycle 은 created 와 mounted이다. why? created는 component가 연결이 된 상태로 가장 빠르게 만날 수 있는 lifecycle hook이고, mounted는 rendering 바로 직후에 확인 할 수 있음.
예시~
<template>
<h1>{{ count }}</h1>
</template>
<script>
export default {
data() {
return {
count: 2
}
},
beforeCreate() { // 활용도 낮음
console.log('333333', this.count); // 얘는 데이터가 정의되기전에 실행된다.이러면 count가 undefined
},
created() {
console.log('222222!', this.count); // 순서에 상관 없음~~
},
beforeMount() {
console.log('순서에 상관없다~~'); // 그래도 가독성을 위해서 순서 맞춰줘야함
console.log(document.querySelector('h1')); // 여기서는 null 발생 why? 구조가 생성되기 전이기 때문에
},
mounted() {
console.log('111111');
console.log(document.querySelector('h1')); // 여기서는 잘나온다.
},
beforeCreate() { // 활용도 낮음
console.log('4324343', this.count); // 얘는 데이터가 정의되기전에 실행된다.이러면 count가 undefined, 순서 상관없다~
},
}
</script>
