[Hoon] Vuejs 강의 - Vue Lifecycle Hooks

Vue Lifecycle Hooks

https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅

https://vuejs.org/images/lifecycle.png

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다.

• 데이터 관찰 설정이 필요한 경우
• 템플릿을 컴파일하는 경우
• 인스턴스 DOM 에 마운트 하는 경우
• 데이터가 변경되어 DOM 을 업데이트하는 경우

그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출

https://kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램

• beforeCreate
• created

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ a }}</p>  
</div>

new Vue({
	el: '#app',  
  data: {
    a: 1
  },
  beforeCreate: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('beforeCreate : ' + this.a)
  },
  created: function () {
    // 데이터 관찰 설정이 필요한 경우
    console.log('created : ' + this.a)
  }
})
// => "a is: 1"

beforeCreate 는 인스턴스가 생성되기 전에 호출
created 훅은 인스턴스가 생성된 후에 호출

모든 라이프사이클 훅은 this 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다. Vue 세계에서 “컨트롤러”의 컨셉이 어디에 있는지 궁금할 수 있습니다. 답은 컨트롤러가 없습니다. 컨트롤러 로직은 이러한 라이프사이클 훅으로 분할됩니다.

• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

var vm = new Vue({
	el: '#app',  
  data: {
    a: 1
  },
  watch : {  	
  	a : function(){
      /* mounted 이후에 원하는 data 를 옵저버 형태로 감시할 수 있다. */
    	console.log('watch : ' + this.a)
    }
  },
  beforeCreate: function () {
    /* 인스턴스가 방금 초기화 된 후 
      데이터 관찰 및 이벤트 / 감시자 설정 전에 동기적으로 호출 됩니다.	*/

    console.log('beforeCreate : ' + this.a)
  },
  created: function () {    
    /* 인스턴스가 작성된 후 동기적으로 호출됩니다. 
    이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 
    메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 
    그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다. */

    console.log('created : ' + this.a)
  },
  beforeMount: function () {
    /* 템플릿을 컴파일 이후 단계 마운트가 시작되기 바로 전에 호출됩니다. 
      render 함수가 처음으로 호출 됩니다.
    */
    console.log('beforeMount : ' + this.a)
  },
  mounted: function () {
    /* 인스턴스 DOM 에 마운트됨
    el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다.
    루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, 
    mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다.

    mounted는 모든 자식 컴포넌트가 마운트 된 상태를 보장하지 않습니다. 
    mounted 내부에서 vm.$nextTick를 사용하면 전체가 렌더링된 상태를 보장합니다. */

    console.log('Mounted : ' + this.a)

    this.$nextTick(function () {
    // 모든 화면이 렌더링된 후 실행합니다.    
    	this.a = 3
      console.log('Mounted $nextTick : ' + this.a)
      
      // this.a = 3	을 하면 한번 더 beforeUpdate 와 Updated 가 발생함
    })
  },
  beforeUpdate: function () {
    /* 데이터가 변경되면, 가상 DOM 재 렌더링과 패치가 이뤄지기 전에 호출됩니다.
    이 훅에서 더 많은 상태 변경을 수행할 수 있으며 
    추가로 재 렌더링을 트리거하지 않습니다.     */

    this.a = 5
    console.log('beforeUpdate : ' + this.a)
  },
  updated: function () {
    /* 데이터가 변경되어 가상 DOM이 재 렌더링되고 패치되면 호출됩니다.

    이 훅이 호출되면 엘리먼트의 DOM이 업데이트 된 상태가 되어 
    이 훅에서 DOM 종속적인 연산을 할 수 있습니다. 
    그러나 대부분의 경우 무한루프가 발생할 수 있으므로 
    훅에서 상태를 변경하면 안됩니다. 
    상태 변화에 반응하기 위해서 계산된 속성 또는 [감시자(#watch)를 사용하는 것이 더 좋습니다.

    updated는 모든 자식 컴포넌트가 재-렌더링 된 상태를 보장하지 않습니다. 
    updated 내부에서 vm.$nextTick를 사용하면 전체가 업데이트된 상태를 보장합니다.
    */
    console.log('Updated : ' + this.a)

    this.$nextTick(function () {
      /* Code that will run only after the
      entire view has been re-rendered

      전체 뷰가 재-랜더링 된 후에만 실행되는 코드 */
    })
  },  
  beforeDestroy: function () {
    /* Vue 인스턴스가 제거되기 전에 호출됩니다. 
    이 단계에서 인스턴스는 아직 완벽하게 작동합니다. */
    console.log('beforeDestroy : ' + this.a)
  },
  destroyed: function () {
    /*  Vue 인스턴스가 제거된 후 호출됩니다. 
     이 훅이 호출되면 Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 
     모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제됩니다. */
    console.log('destroyed : ' + this.a)
  }
})

bit.ly/3fXOzon

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

 

bit.ly/2TtRHis

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런