[Vue2] Vue 인스턴스란?

Vue 인스턴스 생성

Vue로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위는 인스턴스(Instance)다. 앞에서

'Hello Vue'가 출력될 수 있었던 것은 인스턴스가 생성되었기 때문입니다.

1. 인스턴스의 생성

인스턴스를 생성하기 위해서는 new Vue 라는 생성자를 호출해야 된다.

생성자
객체를 새로 생성 할 때, 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고,
새로운 객체를 생성할 때 기존의 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 방법이다.

2.인스턴스의 속성, API들

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

el	Vue가 실행될 HTML의 DOM 요소를 지정	el : ‘#test’	CSS의 선택자를 선택하듯이 선택 (#—> id 지정, . —> 클레스 지정)
data	Vue가 바라보는 data 객체를 지정	data : { name : ‘홍길동’}	직접 객체를 작성해도 되고 미리 선언된 객체변수를 작성해도 됨
computed	함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. methods와 차이점은 캐싱을 시켜놓고 동일한 요청이 또 올 경우는 함수를 실행하지 않고 캐싱된 값만 리턴해 줌	computed : { sum1 : function() {retuen 3 + 4}}	화살표함수는 사용 불가
methods	함수로 정의하고 data객체 등을 사용하여 계산된 값을 리턴해 줌. computed와 차이점은 캐싱이 되지 않고 호출될때마다 계속 함수를 실행함	methods : { sum2 : function() {retuen 3 + 4}}	화살표함수는 사용 불가
watch	지정된 변수를 계속 지켜보고 있다가 값이 변경되었을때 정의된 함수를 실행시킴	watch : { x : function(v) {retuen v++ }}	x는 관찰하고자 하는 지정된 변수, 긴 시간이 필요한 비동기 처리가 필요할 경우 주로 사용됨

인스턴스 라이프사이클 단계에서 호출될 다른 훅은 “mounted, updated, destroyed 등..”이 있다.

 

2. Vue Instance 라이프 사이클

• 데이터 관찰
• 템플릿 컴파일
• DOM 에 객체 연결
• 데이터 변경시 DOM 업데이트

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

 

3. 라이프 사이클 다이어그램

아래는 인스턴스 라이프사이클에 대한 다이어그램이다.

• beforeCreate: Vue 인스턴스가 생성되기 전
• created: vue 인스턴스가 생성된 후
• beforeMount: Vue 인스턴스가 마운트되기 전
• Mounted: Vue 인스턴스가 마운트된 후
• beforeDestory: Vue 인스턴스가 파괴된기 전
• Destory: Vue 인스턴스가 파괴된 후
• beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전
• upDated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후