Vue2 Lifecycle & Lifecycle Method

라이프사이클 다이어그램

순서

  1. new Vue()
  2. Init Events & Lifecycle
  3. Init injections & reactivity
  4. Has "el" option
  5. Has "template" option
    • YES : Compile template into render function
    • NO : Compile el's outerHTML as template
  6. Create vm.$el and replace "el" with it
  7. Mounted
  8. When data changes -> Virtual DOM re-render and patch
  9. When vm.$destroy() is called
  10. Teardown watchers, child components and event listeners
  11. Destroyed

✅ 예제 확인하기 -> JSFiddle

인스턴스와 라이프사이클 훅

라이프사이클 훅을 통해, 컴포넌트가 언제 생성되어, DOM에 추가되고, update되고, destoy 되는지를 알 수 있다.

Vue 인스턴스가 생성될 때, 일련의 초기화 과정을 거치게 된다.

  • 초기화 과정
    1. 데이터 관찰 설정
    2. 템플릿 컴파일
    3. DOM에 인스턴스를 마운트
    4. 데이터가 변경되었을 때 DOM을 업데이트

그러한 경우에, 라이프 사이클 훅(lifecycle hook) 이라는 함수를 호출하게 된다. 이는 유저에게 사용자 정의 로직을 특정 stage에 실행시킬 수 있게 한다.

라이프 사이클 훅의 예로 created, mounted, updated, destroyed가 있다. 모든 라이프사이클 훅은 해당 함수를 호출한 뷰 인스턴스를 가리키는 this context와 함께 호출된다. 따라서 화살표함수를 콜백이나 options 프로퍼티에 사용하면 안된다. options 객체는 인스턴스를 만들 때 넘기는 객체이다.

new Vue({
  data: {
    a: 1,
  },
  created: function () {
    // this는 vm 인스턴스를 가리킨다.
    // 화살표함수는 this에 vm을 가리키지 않으므로, 사용해서는 안된다...!
    console.log(`a : ${this.a}`);
  },
});

Lifecycle Method

Creation (Initialization)

creation hook은 컴포넌트가 DOM에 추가되기 전에 무언가 액션을 할 수 있게 한다.
client rendering이나 server rendering을 하는 동안에 무엇가를 세팅하는 작업을 할 수 있다.
다른 훅들과는 다르게 서버사이드 렌더링에도 이 훅은 호출된다.

new Vue({
  el: "#app",
  data: {
    count: 10
  },
  beforeCreate: function () {
    console.log('Nothing gets called at this moment')
    // `this` points to the view model instance
    console.log('count is ' + this.count); // undefined
  }, 
  created: function () {
    // `this` points to the view model instance
    console.log('count is: ' + this.count) // 10
  }
})

beforeCreate

인스턴스가 초기화된 직후에 동기적으로 호출된다.
이 시점에는 Data observation과 event/watcher가 설정되기 전이다.

created

이 훅은 인스턴스가 create된 직후에 동기적으로 호출된다.
이 훅이 호출된 시점에는 이벤트와 data observation에 대한 설정이 끝난 후이다.

즉,

  • data observation
  • computed properties
  • methods
  • watch/event callback

이 설정된 후다.
그러나 마운트 단계 전이기 때문에, $el프로퍼티는 아직 사용가능하지 않다.

Mounting (DOM Insertion)

beforeMount

마운트 전에 호출된다. 처음으로 render함수가 호출된 후이다.
서버사이드 렌더링시에는 호출되지 않는다.

mounted

instance가 마운트된 이후에 호출된다. 여기서의 마운트란 el가 새로 생성된 vm.$el로 대체되는 것을 말한다.

이 시점에서 Reactive component, template, rendered DOM에 완전히 접근할 수 있다.

<div id="app">
  <div>
      this is textContent
  </div>
</div>


new Vue({
  el: "#app",
  mounted(){
    console.log('---Mount---');
  	console.log(this.$el.textContent); // this is textContent
  }
})

주의할 점은 mounted가 모든 자식 컴포넌트들 또한 마운트되었음을 보장하지는 않는다는 것이다. 전체적인 뷰가 렌더링되기를 기다린다면, vm.$nextTick를 사용하면 된다.







mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

서버사이드 렌더링시에는 호출되지 않는다.

Updating (Diff & Rerender)

리렌더링될 때나, 반응형 프로퍼티가 변경될 때 호출된다.

<div id="app">
  <p ref="dom">
    {{this.counter}}
  </p>
</div>


new Vue({
  el: "#app",
  data() {
    return {
			count: 10,
      counter: 0,
    }
  },
  created: function () {
    setInterval(() => {
    	this.counter++
    }, 1000)
  }, 
  beforeUpdate(){
   		console.log(+this.$refs['dom'].textContent === this.counter); // false
  },
  updated(){
		console.log(+this.$refs['dom'].textContent === this.counter); // true
  }
})

beforeUpdate

데이터가 변경된 후이고, DOM에 적용되어 리렌더링되기 직전에 호출된다.
서버사이드 렌더링에서는 호출되지 않는다.

updated

데이터가 변경이 VDOM이 리렌더링되고 patch되게한 이후에 호출된다.
이 훅안에서 state를 변경하는 것은 하지 않아야 한다.
state 변경에 반응하기 위해서, computed나 watcher를 사용하는 것이 더 좋다.

updated 훅이 모든 자식 컴포넌트 또한 리렌더링된 것을 보장하지 앟ㄴ는다.
전체 뷰가 리렌더링될 때까지 기다리고 싶을 경우, vm.$nextTick을 사용해야 한다.

서버사이드 렌더링에서는 호출되지 않는다.

Destruction (Teardown)

component가 없어질 때, 사용할 수 있는 훅이다.
cleanup이나, 분석할 때 사용할 수 있다.

beforeDestroy

vue instance가 없어지기 바로 전에 호출된다.
이벤트를 없애거나, 반응형 구독을 없애고 싶을 때 beforeDestory에서 하면 된다.
이 시점에 컴포넌트는 functional하다.

destroy

vue instance가 없어진 후에 호출된다. 이 훅이 호출된 시점에, 모든 directive는 바인드가 없어졌으며, 모든 이벤트 리스너가 제거된 상태이다.
또한, 모든 자식 인스턴스들도 없어진 상태이다.

keep-alive 컴포넌트에서 쓰이는 Hook

activated

keep-alive component가 activate되었을 때, 호출된다.
서버사이드 렌더링시에는 호출되지 않는다.

deactivated

keep-alive component가 deactivate 되었을 때, 호출된다.
서버사이드 렌더링 시에는 호출되지 않는다.

출처

Select a repo