JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
어떤 프로그램이건 라이프 사이클이라는 것은중요하다.
라이프 사이클이 뭔지 모르는 사람을 위해서 간단히 이야기 하자면
라이프 사이클은 작게는 특정 객체, 크게는 특정 프로그램의 개발 방법론 까지를 포함한다.
물론 여기서는 큰 개념으로 생각할 필요는 없다. 가장 작은 개념으로 생각하면 된다.
우리가 이야기할 것은 Vue객체의 라이프 사이클을 의미할 것이니.
그럼 아래의 도표도를 보자.
출처 : https://onsen.io/blog/onsen-ui-vue-2/
Vue1을... 할리는 없겠지만 혹시 필요하면 옆에껄 봐라.
우리는 Vue2에 대해서 보도록 할 것이다.
사실 깊게 논하고 싶긴하지만 아직 그럴 때가 아니므로 생명주기들이 존재하고 거기에 관련된 메소드가 존재한다는 것을 알아두는게 좋다.
Vue에서 라이프 사이클을 논하려면 총 4가지의 타이밍을 알아야한다.
Vue2 라이프 사이클
create : 생성 시
mount : 객체와 엘레멘트의 연결 시
update : DOM이 재 렌더링 되었을 때
destroy : 파괴 시
따라서 Vue에서 사용가능한 것은 각각의 라이프 사이클 전과 후만 생각하면 된다.
그러니 총 8가지의 상태가 존재한다는 것이다.
이를 테스트를 통해서 알아보도록 하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAge">{{name}}</button>
<br>
{{age}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26
},
beforeCreate: function () {
alert("Before Create : " + this.name);
},
created: function () {
alert("Create : " + this.name);
}
});
</script>
</html>
이 코드에서 보면 저번 코드와 살짝 비슷한데 vue를 통해서 name과 age가 렌더링을 하는 코드이다.
여기서 beforeCreate와 created는 각각 만들어지기 직전과 만들어지고난 직후를 의미한다.
위의 코드에서 둘다 this.name을 제대로 출력할 수 있을까?
뭐 일반적으로 생각하면 다를 것이다. 객체가 만들어지기 직전에 this.name이 존재할리 없다.
반대로 객체가 만들어지고난 직후에는 this.name이 존재할 것이라는 것이 일반적인 상식이다.
한번 테스트 해보자.
보다시피 this.name은 존재치 않는다. 아직 객체가 만들어지기 전이라서 그렇다.
반대로 created에서는 만들어졌다.
created나 beforeCreate둘다 렌더링은 되지 않았다.
밖의 name과 age를 보면 아직 렌더링이 되지 않음을 확인할 수 있다.
즉 create와 렌더링은 무관한 사이클이라는 것을 알 수 있다.
일단 렌더링이 되려면 mounte가 되야할 것이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAge">{{name}}</button>
<br>
{{age}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26
},
beforeMount: function () {
alert("Before Mount : " + this.name);
},
mounted: function () {
alert("Mounted : " + this.name);
}
});
</script>
</html>
이제 서로 Mount로 테스트 해보자.
두개를 비교해보면 Mounted는 외부의 렌더링이 종료된걸 알 수 있다.
마운트의 뜻자체가 연결을 의미하므로 마운트가 성공한것은 연결이 성공한 것임을 알 수 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAge">{{name}}</button>
<br>
{{age}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26
},
methods: {
showAge: function () {
this.age++;
}
},
beforeUpdate: function () {
alert("Before Update : " + this.name);
},
updated: function () {
alert("Updated : " + this.name);
}
});
</script>
</html>
이번에는 update를 테스트해보자. showAge라는 이벤트는 버튼을 누를때마다 age를 증가시킨다.
vue에서 age가 변경하면 자동으로 update가 되어 재 렌더링을 실시한다.
따라서 버튼을 누르게 되면 우리는 저 두 이벤트를 볼 수 있다.
정상적으로 작동하는 것을 알 수있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAge">{{name}}</button>
<br>
{{age}}
</div>
<div id="test">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26
},
methods: {
showAge: function () {
this.age++;
this.$destroy();
}
},
beforeDestroy: function () {
alert("Before Destroy : " + this.name);
},
destroyed: function () {
alert("Destroyed : " + this.name);
}
});
</script>
</html>
파괴하는메소드도 테스트해보자.
일반적으로 destory는 명시적으로 호출해서 파괴해준다.
this.$destroy()를 호출해서 파괴해보면 메시지를 볼 수 있다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-06]반복문(v-for) (0) | 2018.02.20 |
|---|---|
| [Vue-05]조건문 (0) | 2018.02.20 |
| [Vue-04]데이터 바인딩 (0) | 2018.02.20 |
| [Vue-02]메소드 (0) | 2018.02.18 |
| [Vue-01]Vue 인스턴스 (0) | 2018.02.18 |