뷰 인스턴스 라이프 사이클
1. 인스턴스 생성 new Vue( )
이벤트 및 라이프 사이클 초기화 → beforeCreate → 화면에 반응성 주입 → created → el, template 속성 확인 →
template 속성 내용을 render로 변환 → beforeMount → $el 생성 후 el속성 값을 대입 → mounted
2. 인스턴스를 화면에 부착
인스턴스의 데이터 변경 → beforeUpdate → 화면 재 렌더링 및 데이터 갱신 → updated
3. 인스턴스 내용 갱신
인스턴스 접근 가능 → beforeDestoroy → 컴포넌트, 인스턴스, 디렉티브등 모두 해제 → destroyed → 인스턴스 소멸
4. 인스턴스 소멸 (끝)
각 분기 자세한 설명
beforeCreate
인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 입니다.
created
data속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 왜냐하면 data속성과 method속성이 정의 되어 있기 때문에(this.data, this.fetchData( ))를 사용하여.
beforeMount
created 단계 이후 template 속성에 지정한 마크업 속성을 render( ) 함수로 변환한 후 el속성에 지정한 화면 요소 (DOM)에 인스턴스를 부착하기 전에 호출되는 단계. render( )함수가 호출되기 직전의 로직을 추가하기 좋습니다.
mounted
template속성에 정의한 화면 요소(DOM)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계. 다만, DOM에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위컴포넌트나 외부 라이브러리에 의해 다를 수 있다.
beforeUpdate
el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다.
치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch속성으로 감시합니다.
updated
데이터가 변경되고 나서 가상 DOM으로 다시 화면을 그리고 나면 실행되는 단계입니다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계입니다.
beforeDestroy
뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다. 이 단계에서는 아직 인스턴스에 접근할 수 있습니다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다.
destroyed
뷰 인스턴스가 파괴되고 나서 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됩니다.
예제 코드
마운트를 주석시켰을때
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue lifecycle</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{message}}
</div>
</head>
<body>
<script>
// 인스턴스 생성
new Vue({
el:"#app",
data:{
message : "Hello Vue.js!"
},
beforeCreate:()=>console.log("beforeCreate"),
created:()=>console.log("created"),
//mounted:function (){
// console.log("mounted");
// this.message = "mounted 발생 !";
// },
updated:()=>console.log("updated")
});
</script>
</body>
</html>
마운트 주석을 풀었을때
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue lifecycle</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{{message}}
</div>
</head>
<body>
<script>
// 인스턴스 생성
new Vue({
el:"#app",
data:{
message : "Hello Vue.js!"
},
beforeCreate:()=>console.log("beforeCreate"),
created:()=>console.log("created"),
mounted:function (){
console.log("mounted");
this.message = "mounted 발생 !";
},
updated:()=>console.log("updated")
});
</script>
</body>
</html>
※ 아래와 같이 message의 값이 바뀌는 것을 확인 할 수 있습니다.
'WEB > Vue.js' 카테고리의 다른 글
| 004. 상 하위 컴포넌트 관계 (0) | 2019.11.21 |
|---|---|
| 003. 뷰 컴포넌트(Component) (0) | 2019.11.21 |
| 001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념 (0) | 2019.11.21 |
| 000. Vue.js란? (1) | 2019.11.20 |
댓글