Vue Instance

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

목차

• 1) Vue Instance
• 2) Vue Instance 생성자
• 3) Vue Instance 옵션 설정
• 4) Vue Instance 라이프 사이클
• 5) Vue Instance 라이프 사이클 초기화

 

1. Vue Instance

1) Vue Instance

• Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 기본 필수 단위

new Vue({
    ...
});

 

 

2) Vue Instance 생성자

• new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.
• Vue생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
• Vue로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용할 수 있다.

 

 

3) Vue Instance 옵션 설정

• Vue 객체를 생성할 때 아래와 같은 인스턴스 옵션 속성을 포함할 수 있다.

new Vue({ 
    // instance option properties 
    template: "", 
    el: "", 
    methods: {} 
    // ... 
});

속성	설명
el	- element - element가 가르키는 id에 vue 인스턴스에 마운트 시킴
data	- 화면에 매핑되는 데이터들을 선언하고 담는 옵션 - 해당화면에서만 사용는 로컬 변수와 같은 느낌 - 어플리케이션 전체에서 관리하는 데이터는 'state'라고 정의함 ( vuex)
computed	- data 옵션의 속성이 변경될때 자동으로 호출되는 옵션, data가 변경되면 computed가 캐치함. - 한번 호출되고 data옵션의 해당 속성이 변경되지 않으면 캐싱된 데이터 리턴 - 반드시 return이 있어야 함. - 로직중에 비동기처리 로직이 있으면 사용하면 안됨.
methods	- 일반적인 함수와 동일. - computed와 다르게 캐싱없이 호출시마다 매번 호출되고, 비동기 처리가 가능함. - 값을 return하지 않아도 됨.
watch	- 정의된 data옵션의 속성이 변경되면 호출되는 옵션 - 변경전후 데이터를 확인할 수 있음 - computed 옵션인데 비동기처리 필요할 때 사용, 캐싱은 없음
template	- 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 옵션
created	- 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

 

 

4) Vue Instance 라이프 사이클

created	data속성과 methods속성이 정의되어 그 값에 접근하여 실행할 수 있다. 인스턴스가 화면요소에 부착되기 전이라 template속성에 정의된 돔 요소로 접근할 수는 없다.
mounted	template속성에 정의한 화면 돔 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
updated	데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. - 데이터 값을 갱신하는 로직 : beforeUpdate에 추가 - 변경 데이터 화면 돔 요소와 관련된 로직 : updated에 추가
beforeDestroy	뷰 인스턴스의 데이터를 삭제하기 좋은 단계

 

 

5) Vue Instance 라이프 사이클 초기화

인스턴스가 생성될 때 아래의 초기화 작업을 수행한다.

• 데이터 관찰 :  beforeUpdate단계에서 el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch속성으로 감시한다.
• 템플릿 컴파일
• DOM 에 객체 연결
• 데이터 변경시 DOM 업데이트

 

이 초기화 작업 외에도 개발자가 의도하는 커스텀 로직을 아래와 같이 추가할 수 있다.

new Vue({ 
    data: { a: 1 }, 
    created: function() { 
        // this 는 vm 을 가리킴 
        console.log("a is: " + this.a); 
    } 
});

위 created 이외에도 라이프싸이클 단계에 따라 mounted, updated, destroyed 등을 사용할 수 있다.  이 라이프싸이클 초기화 메서드로 커스텀 로직을 수행하기 때문에 뷰에서는 따로 Controller를 갖고 있지 않다.