뷰 인스턴스(Instance)
뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위.
뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해줘야 함.
형식(생성자) : new Vue({)} (Vue3 부턴 형식 다름)
※ Vue3 문법에서는 Vue2에서 사용하는 new Vue() 대신 createApp을 사용
※ 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법. 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용.
new Vue()로 인스턴스 생성 후 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같음.
1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성(옵션 속성 포함)
3. 특정 화면 요소에 인스턴스 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인
인스턴스 Option
인스턴스를 생성할 때 재정의할 date, el 등의 속성을 의미.
- el : Vue 인스턴스가 그려지는 시작점
- data : 화면에 출력시킬 값 , 변수
- template : 화면에 표시할 HTML,CSS등의 마크업 요소를 정의하는 속성, Vue의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음
- methods : 화면 로직제어와 관계된 메서드를 정의하는 속성
- created : Vue 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
- watch : 컴포넌트 인스턴스의 데이터속성 변경을 감시하고 변경될 때마다 콜백 함수를 실행하는데 사용. 즉 특정 데이터 값이 변경될 때마다 자동으로 특정작업을 수행하도록 설정할 수 있음
인스턴스 라이프 사이클(Instance Life Cycle)
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 함.
각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 함.
※ 라이프 사이클(Life Cycle) : 일반적으로 애플리케이션이 가지는 생명 주기
라이프 사이클 단계는 크게 4단계로 이루어짐
① 생성 : 인스턴스 생성
② 부착 : 생성된 인스턴스를 화면에 부착
③ 갱신 : 화면에 부착된 인스턴스의 내용 갱신
④ 소멸 : 인스턴스 제거
-> 각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됨
라이프 사이클 속성
- beforeCreate : 인스턴스 생성 후 가장 처음 실행되는 라이프 사이클 단계. data, methods 속성이 인스턴스 속성에 정의되기 전. 돔과 같은 화면 요소에도 접근 X
- created : beforeCreate 라이프 사이클 다음에 실행됨. data, methods 속성이 인스턴스 속성에 정의된 상태로 this.data 등 과 같은 로직을 이용해 data, method 속성에 정의된 값에 접근 가능. 인스턴스가 화면 요소에 부착되기 전 단계로, template 속성에 정의된 돔 요소로 접근 불가.
- beforeMount: created 이후 template 속성에 지정ㅇ한 마킁업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계.
※ render() : 화면의 돔을 그리는 함수 - mounted: el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나서 바로 호출되는 단계.
- beforeUpdate : 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계. 변경 예정 데이터의 값과 관련된 로직 미리 넣을 수 있음. 값을 변경하는 로직을 넣어도 화면이 다시 그려지지는 않음.
- updated : 데이터 변경된 후 가상 돔으로 화면 다시 그리고 나서 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점. 이 단계에서 데이터 값을 변경하면 무한루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 함
- beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 인스턴스 접근 가능
- destroy : 뷰 인스턴스 파괴되고 나서 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들도 전부 파괴됨
출처: Do it! Vue.js 입문 책