Contents

Vue 인스턴스 만들기

모든 Vue 앱은 Vue 인스턴스를 만드는 것부터 시작한다.

var vm = new Vue({
    // 옵션
})
Vue 인스턴스를 인스턴스 화 할 때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함 할 수 있는 options 객체를 전달해야 한다. 전체 옵션 목록은 API reference를 참고하자.

인스턴스는 아래와 같이 정의 할 수 있다.
  • 인스턴스는 실제 실행되는 객체다.
  • 인스턴스는 new Vue 라는 생성자로 만들 수 있다. 객체지향에서의 생성자와 비슷하다.
  • 생성자로 인스턴스를 만들기 위해서는 "옵션"들이 필요하다.
아래의 예제를 보자.
<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  });
</script>
new Vue 생성자를 호출해서 새로운 인스턴스를 만들었다. 이 예제는 el과 data 옵션을 사용하고 있다. data는 "데이터타입 옵션"이고 el은 "DOM 타입 옵션"이다.

인스턴스의 유효범위

Vue 인스턴스는 작동하는 유효범위가 있다. 인스턴스의 유효범위는 el 옵션에 의해서 정해진다. 인스턴스가 만들어진 후 화면에 적용되는 순서는 아래와 같다.
  1. Vue 라이브러리 로딩
  2. 인스턴스 객체 생성
  3. HTML element에 인스턴스를 연결
  4. 인스턴스의 실행 결과가 element에 적용
  5. 적용된 화면이 노출
예를 들어 아래의 코드의 경우, el 범위를 벗어났기 때문에 실행되지 않을 것이다.
<div id="app">
</div>
  {{ message }}

인스턴스 라이프사이클

Vue 인스턴스를 만들 때, 데이터 observation, 템플릿 컴파일, 인스턴스를 DOM에 마운트 하는 등의 몇가지 단계가 있다. 개발자는 이러한 단계 중 일부를 후크(hook)해서 사용 할 수 있다.해서 사용 할 수 있다.해서 사용 할 수 있다.해서 사용 할 수 있다. 아래 다이어그램을 보자.

 vue 인스턴스 라이프 사이클

Vue 라이프 사이클은 네 가지 범주로 나눌 수 있다.
  • Creation (Initialization)
  • Mounting (Dom Insertion)
  • Updating (Diff & Re-render)
  • Destroy

Created

beforeCreate()

컴포넌트의 인스턴스가 생성되면 beforeCreate 후크가 트리거된다.beforeCreate는 이베늩 리스터가 컴포넌트에 붙고 데이터모델이 반응하기전에 실행된다. 따라서 beforeCreate를 호출하는 시점에서는 데이터모델에 접근 할 수 없다. 예를 들어 아래 코드에서는 "My name is: yundream"이 출력되지 않는다. 대신 undefined를 반환한다.
<script>
var test_app = new Vue({
    el: "#app-1",
    data: {
        name: "yundream"
    },
	beforeCreate() {
		alert('My name is :'+this.name)
	}
})
</script>

created()

created 후크는 데이터에 엑세스 할 수 있으며, 이벤트가 활성화 된다. 다만 템플릿과 가상 DOM은 아직 마운트되거나 렌더링 되지 않는다.
<script>
var app02 = new Vue({
    el: "#app02",
    data: {
        name: "yundream"
    },
    created() {
      console.log('My name is :'+this.name)
    }
})
</script>
"my name is : yundream"가 출력되는 걸 확인 할 수 있다.

Mounting (DOM Insertion)

좋든 싫든 가장 많이 사용하는 후크다. 렌더링 직전에 컴포넌트에 직접 접근 할 수 있다. 서버렌더링에서는 지원하지 않는다. 초기 렌더링 직전 혹은 직후, 컴포넌트의 DOM에 액세스하거나 수정할때 사용 할 수 있다.

beforeMount
초기 렌더링 직전, 템플릿 혹은 렌더링 함수가 컴파일 된 직후에 실행된다. 일반적으로 사용할 일은 없을 것이다.

mounted
mounted 후크를 이용하면, 컴포넌트, 템플릿, 렌더링된 DOM(this.$el)에 접근할 수 있다.
<script>
var app03 = new Vue({
    el: "#app03",
    data: {
        name: "yundream"
    },
    beforeMount() {
        console.log(`this.$el doesn't exist yet, but it will soon!`)
    },
    mounted() {
        console.log(this.$el.textContent)
    }
})
</script>