뷰의 인스턴스는 레고를 조립하는 기본 판,
컴포넌트는 레고 블록이라고 할 수 있다.
인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스의 기본 형식은
new Vue({..})
로서 흔히 자바에서 클래스를 선언 할 때와 흡사하다. 이 때 Vue 를 생성자라고 하는데, 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 생성자를 이용해서 뷰로 개발 할 때 필요한 기능들을 생성자에 미리 정의해 개발자가 이를 편리하게 사용할 수 있다.
[소스코드 출처 : DoIt Vue.js]
위의 코드는 뷰 인스턴스를 생성하고, el 속성을 통해 해당 뷰 인스턴스를 #app에 바인딩하였다. 나아가 data 속성에 message 값 ‘Hello Vue.js!’ 를 입력하면서, 위의 {{ message }} 값을 정의하였다.
2. 뷰 인스턴스의 옵션 속성
뷰 인스턴스의 옵션 속성이란 data, el, template 등의 속성을 의미한다. Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다. 각 속성값이 변경될 때 뷰가 “반응”하여 새로운 값과 일치하도록 업데이트된다.
el : ‘#app’은 DOM에서 id가 app인 것을 의미한다. 선택자는 기존의 css를 따른다.
이 외에도 기본적으로 template, method, created 등 미리 정의되어 있는 속성을 사용 할 수 있다.
-
template : HTML, CSS등 마크업 요소를 정의
-
method : 화면 로직 제어와 관계된 함수를 정의하는 속성. (ex) 마우스 클릭 이벤트)
-
create : 인스턴스가 생성됨과 동시에 실행 할 로직을 정의하는 속성. 라이프사이클
Vue 라이브러리 로딩 -> 인스턴스 객체 생성(옵션 포함) -> 특정 화면 요소에 인스턴스 주입 -> 인스턴스의 내용이 화면 요소로 변환 -> 사용자가 확인
뷰인스턴스는 new Vue를 통해 인스턴스가 생성되고, html 특정 화면 요소에 주입(el로 정의) 된 부분이 인스턴스의 유효 범위이다.그렇기 때문에 위의 소스에서 div를 벗어나 {{message}}를 선언한다면 데이터가 제대로 바인딩 되지 않는다.
3. Vue 인스턴스의 라이프사이클
뷰의 라이프사이클은 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 총 8가지가 있다. 여기서 크게 생성:create, 부착:mount, 갱신:update, 소멸destroy로 구분 할 수 있다.
-
beforeCreate : 인스턴스가 생성되고 가장 먼저 실행되는 라이프사이클로, data와 methods속성이 아직 정의되지 않고, DOM에도 접근할 수 없다.
-
created : data와 methods속성이 아직 정의되어 로직들을 이용하여 접근 할 수 있다. 아직 인스턴스가 화면에 바인딩되지 않았기 때문에 template 속성에 정의된 돔 요소로는 접근할 수 없다.
-
beforeMount : render() 함수가 실행되지 전 단계
-
mounted : 지정한 화면 요소에 인스턴스가 부착되고 난 후에 호출되는 단계. 화면 요소를 제어하는 로직을 수행한다.
-
beforeUpdate : 인스턴스에 정의된 속성들이 화면에 치환되는데, 변경을 감지($watch)하여 변하기 전 호출된다. 변경 예정 데이터의 값과 관련된 로직을 넣을 수 있다.
-
updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가할 수 있다. 무한루프에 빠질 수 있기 때문에 compute와 watch속성을 이용
-
beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 인스턴스에 접근할 수 있고, 데이터를 삭제하기 좋은 단계
-
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>
'Develope > WEB' 카테고리의 다른 글
| 2-2 Vue 컴포넌트 (0) | 2020.11.03 |
|---|---|
| Vue 프로젝트 구성 (intelliJ) (0) | 2020.10.03 |
| VueJS의 핵심 기능 (0) | 2020.10.02 |
| JS 프레임워크 비교하기 (0) | 2020.09.14 |
| [FullCalendar] 기능정리 (0) | 2019.07.18 |