Vue 인스턴스

Vue 인스턴스란?

Vue 공식문서 설명

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다.
관례적으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다.
Vue 인스턴스를 생성할 때는 options 객체를 전달해야 합니다.
Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다.

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드로, 다음과 같이 생성한다.

new Vue();

이렇게 생성된 Vue 객체를 console.log()를 사용하여 찍어보면 아래와 같이 나온다.

즉, Vue 객체 안에는 미리 속성과 메서드들이 정의되어 있어 이를 통해 화면 개발이 가능하다.

인스턴스 속성

인스턴스에서 사용 가능한 속성과 API는 다음과 같으며, key-value 형태로 접근할 수 있다.

new Vue({
  el: , // 인스턴스가 그려지는 화면의 시작점
  template: , // 화면에 표시할 요소 (HTML, CSS 등)
  data: , // 뷰의 반응성(Reactivity)이 반영된 데이터 속성
  methods: , // 화면 동작과 이벤트 로직을 제어하는 메서드
  created: , // 뷰의 라이프사이클 관련 속성
  watch: ,// data에서 정의한 속성이 변경됐을 때 추가 동작을 수행할 수 있게 정의하는 속성
  // ... 이외에도 다양한 속성과 메서드가 존재
})