1.라이프 사이클.

1-1. 라이프 사이클의 종류

이 과정에서 Vue는 각각의 단계에서, Vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공합니다. 일반적으로 많이 사용하는 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있습니다.

2.Create

2-1. beforeCreate

var app = new Vue({
    el: '#app',
    data:{
        message:'Hello vue.js',
        list: ['사과','바나나','딸기'],
        show: false
        
    },
    methods:{
        handleClick:function(event){  console.log(event.target.value); }
    },
    beforeCreate: function(){
        //데이터가 생기기 이전에 동작한다. 뷰가 인스턴스 된 순간 동작한다. 
        console.log(this.message) // undefined
    }

• 데이터가 생기기 이전에 동작한다. data, methods, watch 등 모두 사용할 수 없습니다.

2-2. Created

    created : function(){
        // 데이터에 진입은 가능하지만, DOM이 아직 Render 되지 않은 상황.!
        console.log(this.message) // Hello vue.js
    }

• DATA나 Method watch, computed가 사용 가능합니다.

3. Mount

3-1. beforeMount

 beforeMount : function(){
        //템플릿이 렌더링 함수로 컴파일 된 직후.
        // Dom 접근 불가능.
        console.log("beforeMounted")
    },

• Vue template이 렌더링 함수로 컴파일 되는 단계
• 아직 Dom에 접근이 불가능합니다.

3-2. Mounted

    mounted: function(){
        //돔 트리를 볼 수 있다!.
        console.log(this.$el);
    },

• this.$el, watch, computed 등등 모든 태그에 접근이 가능합니다.
• Dom에 직접적인 접근이 가능하다!.

3-2-1. 부모 자식간 Mount 순서.

• 항상 Mount는 최하위 자식부터 마운트 됩니다.

3-2-2. Mount의 유의사항 !

 mounted: function() {
        this.$nextTick(function() {
            // 모든 화면이 렌더링된 후 실행합니다.
        })
    }

• 자식 컴포넌트에서 비동기로 데이터를 가져온다면 부모의 mount가 자식의 mount를 보장해줍니다.
• 이 때, 사용하는 것이 $nextTick로 모든 자식 컴포넌트의 mount를 보장해줍니다.

4. Update

4-1. beforeUpdate

  beforeUpdate: function() {
        console.log('beforeUpdate');
    }

• 데이터의 변화가 일어나지만 렌더링이 다시 일어나기 전에 추가 작업이 가능하다.
• 이 작업을 하더라도 재 렌더링을 호출하지 않습니다.

4-2. updated

	  updated:function() {
        console.log('updated');
    }

• 데이터가 DOM에 적용된 이후를 말합니다.
• 이 단계에서 data를 조작한다면 무한 렌더링에 빠질 수 있어 유의해야합니다!.
• $nextTick를 통해서 자식 컴포넌트의 렌더링을 보장할 수 있습니다.

5.Destroy

5-1. beforeDestory

  beforeDestroy: function() {
        console.log('beforeDestroy');
    }

• 해제 되기 이전이라 모든 속성에 접근이 가능합니다.
• 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 한다면 해당 생명주기를 활용하는 것이 좋습니다.
• 서버 렌더링시 호출되지 않습니다.

5-2. Destroyed

destroyed:function() {
        console.log('destroyed');
    }

• 컴포넌트가 제거된 후에 호출됩니다.
  +Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제됩니다.
  +서버 렌더링시 호출되지 않습니다.

Reference

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html