[Vue] Vue 인스턴스

02 57e7a793ef2446aa818778dba8a4d776

Vue 인스턴스는 Vue.js를 시작할 때 사용하는 객체를 의미하며 어플리케이션의 시작점이라고 할 수 있다.

Vue 어플리케이션은 Vue함수로 인스턴스를 생성하는 것부터 시작한다.


var vm = new Vue({
    // options
});
//또는
new Vue({
    // options
});

옵션에는 아래와 같은 속성들이 전달된다.

위 속성들은 컴포넌트와 다르지 않다.

여기서는 el 프로퍼티를 볼 수 있는데 이는 HTML 문서에 마운트될 HTML 엘리먼트를 지정하는 역할을 한다.


//html
<body>
  <div id="app"></div>
</body>


// script
new 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 훅 발생

티스토리툴바