vue.js 공식문서 따라하기 - vue 인스턴스(Instance)

vue 인스턴스(Instance) 만들기

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다.

var vm = new Vue({
  // 옵션
})

vm 이름으로 Vue인스턴스를 생성한다. 해당 내용은 하위의 내용으로 설명을 하는게 이해가 빠르기 때문에 바로 다음으로 넘어가겠습니다.

 

데이터와 메소드(Data and Methods)

vue 인스턴스를 생성할때 option에서 선언하는 모든 속성이 반응형 시스템으로 생성됩니다. 속성이 변경될때 vue가 반응하여 해당 해당 속성을 바라보고 있는 속성도 업데이트 됩니다. 글로는 설명이 어려우니 공식문서의 소스를 보고 설명 하겠습니다.

var data = { a: 1 }

// Vue인스턴스에 데이터 객체를 추가합니다.
var vm = new Vue({
  el: '#app',
  data: {
    vmData: data
  }
})

// 인스턴스에 있는 속성은
// 원본 데이터에 있는 값을 반환합니다.
console.log(vm.vmData.a === data.a); // => true

// 인스턴스에 있는 속성값을 변경하면
// 원본 데이터에도 영향을 미칩니다.
vm.vmData.a = 2
console.log(data.a); // => 2

// ... 반대로 마찬가지입니다.
data.a = 3
console.log(vm.vmData.a); // => 3

공식문서 소스를 설명하기 편하게 변경해서 작성하였습니다.

1. data라는 객체(object)를 선언하고 vm에 vue 인스턴스 생성
2. vue 인스턴스에 선언한 vmData 객체와 data 객체 비교 확인
3. vue 인스턴스에서 선언한 vmData 객체의 속성을 변경하면 원 데이터 객체도 변경 확인
4. 원 데이터 객체 변경하면 vue 인스턴스에서 선언한 vmData 객체의 속성도 변경 확인

012

console.log로 2~4번을 찍어봤는데 원하는 정보가 나오는것을 확인했다. 

 

데이터가 변경되면 화면은 다시 렌더링됩니다. 유념할 점은, data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것입니다. 즉, 다음과 같이 새 속성을 추가하면 b가 변경되어도 화면이 갱신되지 않습니다. 

vm.vmData.b = 'hi'

위의 내용처럼 b 속성을 사용하고 싶다면 초기값을 지정해야한다.

var data = { a: 1, b: '' }

 

01

 

여기에서 유일한 예외는 Object.freeze ()를 사용하는 경우입니다. 이는 기존 속성이 변경되는 것을 막아 반응성 시스템이 추적할 수 없다는 것을 의미합니다.

Object.freeze(data)

기존 소스에 Object.freeze(data) 를 사용하여 data 변경을 막아보았습니다.

위의 내용처럼 원 데이터 속성 / vue 인스턴스 속성을 변경해도 데이터가 변경되지 않습니다.

 

Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다.

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

console.log(vm.$data === data) // => true
console.log(vm.$el === document.getElementById('example')) // => true

// $watch 는 인스턴스 메소드 입니다.
vm.$watch('a', function (newVal, oldVal) {
  // `vm.a`가 변경되면 호출 됩니다.
  console.log('newVal : ' + newVal + ' / oldVal : ' + oldVal);
})

 

인스턴스 라이프사이클 훅

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우, 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우, 그리고 데이터가 변경되어 DOM를 업데이트하는 경우가 있습니다. 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출됩니다. 예를 들어, create 훅은 인스턴스가 생성된 후에 호출됩니다.

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})

라이프사이클훅은 여러가지 있는데 하단의 이미지로 대체하고 추후 정리하겠습니다.

 

라이프사이클 다이어그램

 

오늘은 간단한 데이터와 메소드 그리고 vue 인스턴스의 라이프사이클에 대해 정리해보았습니다. 간단하게 이해만 하고 넘어가시면 추후 해당 내용에 대해 깊숙하게 나올겁니다. 그럼 다음 내용으로 다시 오겠습니다.