[Vue.js] 인스턴스

인스턴스는 뷰로 개발하게되면 필수적으로 사용해야하는 코드.

new Vue();

보통 이런식이나

var vm = new Vue();

이런 식으로 사용한다. 

 

이 Vue 인스턴스에는 미리 정의되어있는 속성과 메서드(API)들이 있기 때문에, 이를 활용해서 개발을 진행하면 편하다.

 

우선 대표적인 인스턴스 속성과 API를 살펴보면

new Vue({
	el: , //인스턴스가 그려지는 화면의 시작점(특정 HTML 태그들)
    template: , //화면에 표시할 요소(html,css등)
    data: , //반응성(Reactivity)이 반영된 데이터 속성. 여기서 선언된 데이터는 html에서 {{ }}로 사용 가능
    methods: , //화면의 동작과 이벤트 로직을 제어하는 메서드.
    created: , //뷰의 라이프 사이클과 관련된 속성. 객체가 처음 생성될 때 실행됨.
    watch: , //data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성.
});

 

위에서 말한 인스턴스 라이프 사이클은 인스턴스가 생성되어 소멸되기까지의 전 과정을 의미.

가장 큰 단계는 3가지로 나뉨

• data 속성의 초기화 및 관찰(Reactivity 주입)
• 뷰 템플릿 코드 컴파일(Virtual DOM -> DOM 변환)
• 인스턴스를 DOM에 부착

라이프 사이클을 이해하면 좋은 점은, 라이프 사이클 훅을 사용해 원하는 시점에서 로직을 구현할 수 있는 부분.

예를 들어 컴포넌트가 생성되자마자 데이터를 불러오고 싶으면 created나 beforeMount를 이용해 화면이 로딩되면서 바로 데이터를 불러올 수도 있다.