[Vue.js] Vue 인스턴스(instance)란?

Vue instance의 속성

el

Vue가 적용될 요소를 지정한다. CSS Selector or HTML Element

data

Vue에서 사용되는 정보를 저장한다. 객체 또는 함수의 형태이다.

template

화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성이다. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.

methods

화면 로직 제어와 관계된 method를 정의하는 속성이다. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다.

 

created

뷰 인스턴스가 생성되자마자 실행할 로직을 정의한다.

Vue Instance의 유효 범위

Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용된다.
el 속성과 밀접한 관계가 있다.

인스턴스가 화면에 적용되는 과정
뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성(옵션 속성 포함) -> 특정 화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인

Vue()로 인스턴스가 생성된다.
el 속성에 지정한 화면 요소(DOM)에 인스턴스가 부착된다.
el 속성에 인스턴스가 부착된 후 data 속성이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다.

Vue Instance Life Cycle

Life Cycle은 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 나뉜다.

 

● Life Cycle Hooks

 

beforeCreate

Vue Instance가 생성되고 각 정보의 설정 전에 호출된다. DOM과 같은 화면 요소에 접근이 불가하다.

 

created

Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출된다. Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근이 불가하다. 서버에 데이터를 요청(http 통신)하여 받아오는 로직을 수행하기 좋다.

 

beforeMount

마운트가 시작되기 전에 호출된다.

 

mounted

지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출된다. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행한다.

 

beforeUpdate

데이터가 변경될 때 virtual DOM이 랜더링, 패치되기 전에 호출된다.

 

updated

Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트된 상태이다. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가한다.

 

beforeDestroy

Vue Instance가 제거되기 전에 호출된다.

 

destroyed

Vue Instance가 제거된 후에 호출된다.