Vue.js Lifecycle
14 Mar 2022 | Vue.jsVue.js Lifecycle
라이프사이클 순서
Vue의 라이프사이클은 아래와 같은 순서로 이루어집니다.
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
beforeCreate
인스턴스가 생성된 후 가장 처음 실행되는 단계입니다. data 및 methods 속성이 아직 인스턴스에 정의되지 않았으며,
DOM 요소에도 접근할 수 없습니다.
created
data 및 methods 속성이 정의되었습니다. 하지만 인스턴스가 화면에 마운트되지 않았기 때문에 DOM 요소에는 접근할 수 없습니다.
beforeMount
인스턴스가 DOM에 마운트되기 직전에 호출되는 단계입니다. render() 함수가 호출되기 직전의 로직을 넣기 적합합니다.
mounted
DOM에 인스턴스가 마운트되고나서 호출되는 함수입니다.
App.vue 예제 코드
<template>
<img alt="Vue logo" src="./assets/logo.png" />
</template>
<script>
export default {
name: "App",
components: {},
beforeCreate() {
console.log("[snowdeer] beforeCreate()");
},
created() {
console.log("[snowdeer] created()");
},
beforeMount() {
console.log("[snowdeer] beforeMount()");
},
mounted() {
console.log("[snowdeer] mounted()");
},
beforeUpdate() {
console.log("[snowdeer] beforeUpdate()");
},
updated() {
console.log("[snowdeer] updated()");
},
beforeUnmount() {
console.log("[snowdeer] beforeUnmount()");
},
unmounted() {
console.log("[snowdeer] unmounted()");
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
예제 코드를 실행하면 모든 로그가 출력되는 것이 아니라 beforeCreate, created, beforeMount, mounted 까지만
출력됩니다. 그 이유는 updated는 데이터 변경이 발생했을 때 화면 갱신을 위해 호출되는 로직이기 때문입니다.
따라서 아래와 같이 코드를 조금 수정해서 데이터를 변경하면 updated 까지 로그가 출력되는 것을 확인할 수 있습니다.
수정된 App.vue 예제 코드
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<h1></h1>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
message: `hello, snowdeer`,
};
},
beforeCreate() {
console.log("[snowdeer] beforeCreate()");
},
created() {
console.log("[snowdeer] created()");
},
beforeMount() {
console.log("[snowdeer] beforeMount()");
},
mounted() {
console.log("[snowdeer] mounted()");
this.message = `hello, snowdeer +_+`;
},
beforeUpdate() {
console.log("[snowdeer] beforeUpdate()");
},
updated() {
console.log("[snowdeer] updated()");
},
beforeUnmount() {
console.log("[snowdeer] beforeUnmount()");
},
unmounted() {
console.log("[snowdeer] unmounted()");
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
