라이프 사이클은 인스턴스 상태에 따라 호출할 수 있는 속성을 칭한다.
이것은 vue에만 있는것은 아니고 리엑트 앵귤러 심지어 모바일 프로그래밍을 할 때도 사용한다.
vue에서는 생명주기를 라이프사이클이라고 하며 각 라이프사이클에서 수행하는 로직을 라이프 사이클 훅 이라고 칭한다.
라이프사이클 속성
Vue의 라이프사이클 속성에는 8개의 상태가 존재한다.
라이프사이클 단계
인스턴스 생성 -> 생성 인스턴스 화면에 부착 -> 인스턴스 내용 갱신 -> 인스턴스 제거
| 속성 | 설명 |
|---|---|
| beforeCreate | 인스턴스 생성 후 첫 단계, data 속성과 methods 속성이 인스턴스에 아직 정의 되지 않음, 돔에도 접근 불가한 상태 |
| created | data 속성과 methods 속성이 정의 되어있어서 this.data, this.fetchData() 같은 로직 수행가능, 화면 부착 전이라 돔 요소 접근 불가능, 서버에 데이터를 요청하기 좋은 상태이다. |
| beforeMount | template 속성에 지정한 마크업 속성을 render() 함수로 변환 한 후, el속성에 지정한 화면 요소(돔)에 인스턴스를 부착 전 호출하는 단계 |
| mounted | el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 호출 되는 단계, template 속성에서 정의한 화면요소(돔)에 접근이 가능, 돔에 인스턴스가 붙자 마자 바로 호출되기 때문에 외부라이브러리에 의해 추가되는 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음. 변환시점이 다를 시 $nextTick() API를 활용하여 HTML 코드로 최종 파싱이 될때까지 기다리게 제어 |
| beforeUpdate | el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다, 치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 감시한다. 데이터가 변경 되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계 |
| updated | 데이터가 변경되고 나서 가상 돔으로 다시화면을 그리고나서 실행하는 단계, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋음 |
| beforeDestroy | 뷰 인스턴스가 파괴되기 직전에 호출 되는 단계, 뷰 인스턴스 데이터를 삭제하기 좋은 단계이다 |
| destroyed | 뷰 인스턴스가 파괴되고 나서 호출되는 단계, 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다. |
코드확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<title>Vue Sample</title>
</head>
<body>
<div id="app">{{message}}</div>
</body>
<script>
new Vue({
el: "#app",
data: {
message: "hello vue js!",
},
beforeCreate: function () {
console.log("beforeCreate");
},
created: function () {
console.log("create");
},
mounted: function () {
console.log("mounted");
this.message = "나는야 호두득";
},
updated: function () {
console.log("update");
},
});
</script>
</html>
위와 같이 라이프사이클을 지정하고 콘솔에 찍히는 화면을 보면 학습했던 라이프사이클을 그대로 따라가는 것을 확인 할 수 있다.
제일 하단에 update가 제일 나중에 명시가 된 것은 update는 mounted단계에서 data속성의 message를 변경했기 때문에 mounted 다음에 호출 된것을 확인 할 수 있다.
감성 프로그래머 HoduDeuk