1. 뷰인스턴스(Instance)
- 뷰 인스턴스는 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
- Vue 생성자는 미리 정의 된 옵션으로, 재사용 가능한 컴포넌트 생성자를 생성하도록 확장 될 수 있음
xxxxxxxxxxvar vm = new Vue({ // 옵션})
뷰 인스턴스를 생성할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달 해야함
xxxxxxxxxx//옵션 예시var vm = new Vue({ el: '#app', //마운트할 엘리먼트 data{ message: 'Hello Vue.js!' //데이터 }})
2. 뷰인스턴스 라이프 사이클
뷰인스턴스는 생성될 때, 단계별로 초기화 단계를 거침. 예를들어 생성될 때, 데이터가 변경 될 때, 인스턴스가 파괴 될 때 등.
라이프 사이클
- 인스턴스의 상태에 따라(혹은 단계별로) 호출할 수 있는 속성들
- created, mounted, updated, destroyed 등 여러 개의 속성이 존재
라이프 사이클 훅
- 각 라이프 사이클 속성에서 실행되는 사용자 정의 로직을 실행
xxxxxxxxxx//created 훅은 인스턴스가 생성된 후 호출됨var vm = new Vue({ data: { a: 1 }, created: function () { console.log('a is: ' + this.a) }})// => "a is: 1"
- 뷰인스턴스 전체 라이프사이클
이벤트 및 라이프 사이클 초기화 후 beforeCreate 호출
이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어있지 않음
DOM과 같은 화면 요소에 접근 불가
반응성 및 주입 초기화 후 created 호출
this.data 또는 this.fetchData와 같은 로직들을 이용하여 data와 methods 속성에 정의된 값에 접근 가능
인스턴스가 아직 화면에 부착되기 전이기 때문에, template 속성에 정의된 DOM 요소 접근 불가
el요소가 화면에 부착되기전 beforeMount 호출
template 속성에 지정한 마크업 속성을 render() 함수로 변환된 후 화면에 부착되기 전의 단계
render() 함수가 호출되기 직전에 필요한 로직을 추가하기 좋음
el요소가 화면에 부착된 후 Mounted 호출
화면 요소를 제어하는 로직을 수행하기 좋은 단계
DOM에 인스턴스가 부착되자마자 바로 호출되기 때문에, 하위 컴포넌트나 외부 라이브러리에 의하 추가된 화면 요소들은 변환되는 시점이 다를 수 있음
이런 경우, $nextTick() API를 이용하여 최총 HTML코드로 변환될 때 까지 기다린 후 로직 추가
데이터 변경이 감지되면
화면에 다시 그리기전에 beforeUpdate 호출
- $watch 속성으로 변경 감지
- 변경 예정인 새 데이터에 접근 가능하여 새로운 값과 관련된 로직을 미리 넣을 수 있음
화면에 그려진 후 updated 호출
데이터 변경 후 화면 요소 제어와 관련된 로직이나 데이터 값 갱신을 추가하기 좋은 단계
이 단계에서 값을 변경하면 무한 루프에 빠질 수 있음
computed, watch와 같은 속성 사용 필요
인스턴스요소가 파괴되기 전에 beforeDestory 호출
아직 인스턴스 접근 가능함
뷰인스턴스의 데이터를 삭제하기 좋은 단계
인스턴스 요소가 파괴된 후 destoryed 호출
3. 실습 예제
xxxxxxxxxx<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Vue Sample</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data:{ message: 'Hello Vue.js!' }, beforeCreate: function(){ console.log('beforeCreate 호출'); }, created: function(){ console.log('created 호출'); }, beforeMount: function(){ console.log('beforeMount 호출'); }, mounted: function(){ console.log('mounted 호출'); }, beforeUpdate: function(){ console.log('beforeUpdate 호출'); }, updated: function(){ console.log('updated 호출'); }, beforeDestroy: function(){ console.log('beforeDestroy 호출'); }, destroyed: function(){ console.log('destroyed 호출'); } }); vm.$destroy(); </script> </body></html>
- $destroy 함수는 직접 호출하면 안되지만, 라이프사이클의 이해를 돕기 위해 사용
- 데이터 변경이 없었기 때문에 updated, beforeUpdate는 호출되지 않음
- 호출되도록 mounted의 로직을 수정
xxxxxxxxxxmounted: function(){ console.log('mounted 호출'); this.message = 'message값을 변경합니다.';},updated: function(){ console.log('updated 호출'); vm.$destroy();//$destroy함수 위치 변경},
[참고]
- Do it! Vue.js 입문 - 장기효
- https://kr.vuejs.org/v2/guide/index.html
'Web > Vue.js' 카테고리의 다른 글
| [Vue.js] - HTML5 WebSocket(웹 소켓) 소스코드 및 데모 사이트 (0) | 2020.11.13 |
|---|---|
| Vue.js 뷰 템플릿 정리 (5) (0) | 2020.05.07 |
| Vue.js 뷰 라우터 정리 (4) (0) | 2020.04.29 |
| Vue.js 컴포넌트 (3) (0) | 2020.04.23 |
| Vue.js란 무엇인가? (1) (1) | 2020.04.20 |
댓글