Vue Instance
⛹️♂️뷰 인스턴스의 정의와 속성
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다.
뷰 인스턴스 생성
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>뷰 인스턴스 생성</title>
</head>
<body>
<div id='app'>
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능하다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함이다.
뷰 인스턴스 옵션 속성
뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template등의 속성을 의미한다.
예를 들어 위의 예제에서는 data라는 미리 정의되어 있는 속성을 사용했다.
그 안에 message라는 새로운 속성을 추가하고 값을 주었다.
el속성은 뷰로 만든 화면이 그려지는 시작점을 의미한다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야한다.
⛹️♂️뷰 인스턴스 라이플 사이클
인스턴스 생성
1. beforeCreate
- data, methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근 불가능
2. created
- data, methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data속성과 methods속성에 정의된 값에 접근하여 로직을 실행할 수 있다.
- 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없다.
3. beforeMount
- created 단계 이후 template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계, render() 함수가 호출되기 직전의 로직을 추가하기 좋다.
4. mounted
- el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 호출되는 단계로, template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계,
다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포턴트나 외부라이브러리에 의해 추가된 화면 요소들의 최종 HTMl 코드로 변환되는 시점과 다를 수 있다.
5. beforeUpdate
- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시한다. 이를 데이터 관찰이라고 한다.
6. updated
- 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계이다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계,
- 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다. 따라서 데이터 값을 갱신하는 로직은 가급적이면 befereUpdate에 추가하고 updated에서는 변경 데이터의 화면요소와 관련된 로직을 추가하는 것이 좋다.
7. beforeDestroy
- 뷰 인스턴스가 파괴되기 직전에 호출되는 단계, 이 단계에서는 아직 인스턴스에 접근할 수 있다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
8. destroyed
- 뷰 인스턴스가 파괴되고 나서 호출되는 단계, 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.
라이플사이클 실습예제
<html>
<head>
<title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></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");
this.message = 'Hello Vue!';
},
updated: function() {
console.log("updated");
}
});
</script>
</body>
</html>
신입 프론트엔드 개발자