Vue 인스턴스는 Vue.js를 시작할 때 사용하는 객체를 의미하며 어플리케이션의 시작점이라고 할 수 있다.
Vue 어플리케이션은 Vue함수로 인스턴스를 생성하는 것부터 시작한다.
var vm = new Vue({ // options});//또는new Vue({ // options});옵션에는 아래와 같은 속성들이 전달된다.
- el, template, data, props, computed, methods, watch
위 속성들은 컴포넌트와 다르지 않다.
여기서는 el 프로퍼티를 볼 수 있는데 이는 HTML 문서에 마운트될 HTML 엘리먼트를 지정하는 역할을 한다.
//html<body> <div id="app"></div></body>// scriptnew Vue({ el: "app"});vue/cli로 Vue 프로젝트를 생성 후 index.html을 보면 body태그는 body>div 형태로 구성되어 있다. 여기 id를 app으로 지정한 div 엘리먼트에 뷰 인스턴스가 마운트된다.
Vue 인스턴스의 라이프사이클은 아래와 같다
Vue 인스턴스가 new 키워드를 통해 초기화된다.
초기화 완료 후
beforeCreate훅이 발생- 아직 데이터와 이벤트가 생성되지 아ㅣㄶ아 접근할 수 없다.
data, event, computed, methods같은 옵션들이 설정
위 과정 완료 후
created훅템플릿이나 el 프로퍼티로 참조된 템플릿을 컴파일 하고 Virtual DOM을 업데이트한다.
첫 렌더링이 일어나기 직전
beforeMount훅렌더링된 HTML 태그로 $el 프로퍼티를 생성하고 이 HTML 태그를 실제 DOM에 삽입한다. 즉 virtual DOM이 렌더링되고 그 결과가 실제 DOM에 적용되는 것이다.
마운트가 완료되면
mounted훅마운트된 이후 뷰 인스턴스에 정의된 데이터들에 변화가 생기면 DOM에 변경사항이 반영된다.
- 변경사항 반영 전
beforeUpdate훅 - DOM에 변경사항 반영
- 변경 후
updated훅
- 변경사항 반영 전
$destroy()가 호출되면 인스턴스가 종료된다.제일 먼저
beforeDestroy훅모든 디렉티브 바인딩이 해제되고 이벤트 리스너가 제거되며 하위 Vue 인스턴스도 제거된다.
Vue 인스턴스가 destroyed 상태가 되고
destroyed훅 발생