Vue 인스턴스

💡 Vue.js 인스턴스와 라이프 사이클 훅에 대해 알아보자 💡

📌 인스턴스와 라이프 사이클의 이해를 기반으로 Vue.js 개발시 정말 큰 도움이 되고, 오류 및 문제 발생 시 빠른 해결이 가능하다!

1. Vue 인스턴스 만들기

var vm = new Vue({
	// vm : ViewModel의 약자
});

2. 데이터

• Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가

  • 속성값이 변경될 때마다 새로운 값과 일치하도록 업데이트 된다!

    • 데이터가 변경되면 화면은 다시 랜더링

    var mydata = {a : 1};
    
    var vm = new Vue({
    	data : mydata
    });
    
    // vm.a === mydata.a
    
    vm.a = 2;
    data.a = 2;
    
    data.a = 3;
    vm.a = 3;

  • Object.freeze()

    • 기존 속성이 변경되는 것을 막을 수 있다.

    • 반응형 시스템이 시스템이 추적할 수 없다.

      var obj = {
      	foo : 'bar'
      };
      
      Object.freeze(obj);
      
      new Vue({
        el : '#app',
        data : obj
      });
      
      // obj의 bar는 더이상 변하지 않는다. 

3. 인스턴스의 LifeCycle hook

Vue.js 를 활용해 개발할 때, 어느 시점에 데이터가 바인딘 되는지, 어떤 시점에 함수를 호출해야되는지에 대한 어려움이 있었다.

• LifeCycle을 이해하면 위의 어려움을 극복해가는데 도움이 될 것이라고 생각한다.

LifeCycle

LifeCycle : Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기 까지의 단계

• Vue 인스턴스는 생성될 때 초기화 단계를 거친다.
  • 데이터 관찰 설정
  • 템플릿 컴파일
  • 인스턴스를 DOM에 마운트
  • 데이터 변경으로 인한 DOM 업데이트

4. LifeCycle Diagram

• beforeCreate (생성)

  • Vue 인스턴스가 초기화 된 직후 발생
  • Component가 DOM에 추가되기 전
    • this.$el, 인스턴스의 데이터와 메소드에 접근 불가

• created (생성)

  • 데이터를 반응형으로 추적 가능!

    • 데이터 세팅, 이벤트 리스너 설정

  • computed, watch, 메소드에 접근은 가능!

    그러나, 아직 DOM에 추가되지 않은 상태

• beforeMount (부착)

  • 가상 DOM 생성
  • 실제 DOM에 부착하기 직전에 호출
  • template 이 있는지 확인 후, 랜더링한 상태

• mounted (부착)

  • 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행

    • this.$el, 인스턴스의 데이터와 메소드 등 모든 Vue 인스턴스에 접근 가능

  • 부모 - 자식

    실제로 Vue를 활용해 개발하면 부모-자식 관계의 Component 가 다수 발생한다.

    • 부모의 mounted 훅은 자식의 created & mounted가 수행된 후 수행된다.

    • 부모의 mounted 훅이 모든 자식 Component의 mounted 를 보장하지 않는다.

      • this.$nextTick 을 이용해 모든 자식 Component의 mounted 를 보장할 수 있다.

        new Vue({
          el : '#app',
          mounted(function(){
            this.$nextTick(function(){
              // 모든 화면이 랜더링 된 후에 실행
            });
          });
        });

• beforeUpdate (갱신)

  • 데이터의 변경이 발생하고, DOM에 적용시켜야 하는 경우
    • 변화 직전에 호출
    • DOM에 랜더링 하기 전이지만, 해당 데이터를 활용해 작업은 가능!

• updated (갱신)

  • 실제 DOM이 변경된 이후에 호출
  • 변경된 데이터가 실제 DOM에 적용
    • DOM을 이용해 변경된 값들에 접근 가능!
  • 해당 훅에서 데이터를 변경하면 무한루프의 위험이 있다.
    • 데이터를 직접적으로 변경하지 않도록 주의한다.
  • this.$nextTick 를 이용해 모든 화면이 업데이트된 이후의 상태를 보장받을 수 있다.

• beforeDestroy (소멸)

  • Vue 인스턴스가 해체되기 직전에 호출
  • 모든 Vue 인스턴스에 접근이 가능하다.
  • 이벤트 리스너 해제 등 사라지기 전 해야할 업무 처리에 용이

• destoryed (소멸)

  • Vue 인스턴스가 해체되기 직후에 호출
  • 모든 Vue 인스턴스에 접근 불가하다.
    • 하위 Vue 인스턴스도 삭제 된다.