인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)라고 한다.

라이프 사이클 속성에는 created, beforeCreate, beforeMount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련되어 총8 개가 있다.


라이프 사이크은 크게 4단계로 나눠진다. 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸단계


Vue 객체에서 제공되는 속성들을 통해 생명 주기에 대한 처리를 할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
<div id="app">
    {{ message }}
</div>
 
<script src="https://unpkg.com/vue"></script>
 
<script>
    new Vue({
        el : '#app',
        data : {
            message : 'Hello Vue.js!'
        },
 
        beforeCreate: function(){
            console.log ('beforeCreate');
        },
 
        created : function(){
            console.log('created');
        },
 
        mounted : function(){
            console.log('mounted');
        },
 
        updated : function(){
            console.log('updated');
        }
 
    });
</script>
 
</body>
</html>
cs


결과

updated 라이프 사이클 훅은 뷰 인스턴스에서 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 로직이기 때문에 보이지 않는다.

updated의 앞 단계인 mounted 단계에서 기존에 정의된 data속성의 message값을 변경해보겠다,

1
2
3
4
5
6
7
8
mounted : function(){
            console.log('mounted');
            this.message = 'Hello Vue!';
        },
 
        updated : function(){
            console.log('updated');
        }
cs


콘솔창에 updated 라이프사이클이 반영되었다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
    <div id="test1">
        <h3>{{a1}}</h3>
        <button type="button" v-on:click='setValue'>값 변경</button>
    </div>
 
<script src="https://unpkg.com/vue"></script>
 
<script>
new Vue({
    el : '#test1',
    data : {
        a1 :100
    },
    //Vue 객체가 관리할 요쇼들이 만들어지기 전에 호출되는 함수
    beforeCreate : function(){
        console.log('Vue 객체가 관리할 요소들이 만들어지기 전 입니다.')
        console.log('a1 :' + this.a1)
    },
    //Vue 객체가 관리할 요소들이 만들어지고 난 이후
    created : function(){
        console.log('Vue 객체가 관리할 요소들이 만들어진 후 입니다.')
        console.log('a1 :' + this.a1)
    },
    //Vue 객체가 관리할 HTML 태그 객체가 할당 되기 전
    beforeMount : function(){
        console.log('Vue 객체가 관리할 태그가 할당 되기 전입니다.')
    },
    //Vue 객체가 관리할 HTML 태그 객체가 할당 된 후
    mounted : function(){
        console.log('Vue 객체가 관리할 태그가 할당 된 이후 입니다.')
    },
    beforeUpdate: function(){
        console.log('관리하고 있는 HTML요소 내부가 변경되기 전입니다.')
    },
    updated : function(){
        console.log('관리하고 있는 HTML요소 내부가 변경된 후 입니다.')
    },
    methods : {
        setValue : function(){
            this.a1 = 200
        }
    }
});
</script>
 
</body>
</html>
cs


버튼을 누르면 updated가 실행된다.


저작자표시

'Vue' 카테고리의 다른 글

v-html, v-bind  (0) 2019.07.30
컴포넌트 (전역 컴포넌트와 지역 컴포넌트)  (0) 2019.07.30
CDN으로 Vue 사용하기, 인스턴스 만들기 연습  (0) 2019.07.29
Vue.js 소개, 공부, 정리  (0) 2019.07.29
노드js 설치  (0) 2019.07.28

+ Recent posts

티스토리툴바