200905 Vue - Lifecycle & Hooks

Vue instance의 lifecycle & Hooks

이미지 출처 :: https://codingexplained.com/coding/front-end/vue-js/vue-instance-lifecycle-hooks - vue lifecycle

1. beforeCreate()

new 키워드로 인스턴스를 생성한 바로 직후, vue는 첫번째 lifecycle (beforeCreate) 를 동기적으로 호출합니다.
이 hook을 호출한 후에, vue는 data observation(관찰)과 event를 초기화하는 과정을 진행합니다.

2. create()

다음으로, create 라는 hook을 가지는데, 인스턴스가 생성된 후에 동기적으로 호출됩니다.
이 hook 이 호출되면, vue 인스턴스의 옵션들은 data observation, computed properties, methods 등등을 세팅하는 과정을 진행합니다.
그리고 우리가 제작한 <template> 을 가지고 컴파일링 하게됩니다.
이 말은 즉, Virtual DOM을 <template> 을 기준으로 업데이트 한다는 의미가 됩니다. Virtual DOM 변화 과정의 자세한 설명은 여기 를 참조하세요!

Vue instance가 el 프로퍼티를 가지지 않는다는것을 주의하세요! 그리고 이것은 우리가 이전에 했던 $mount 메소드가 호출된 후 즉시 일어납니다.

3. beforeMount()

다음은 <template> 을 mounting 합니다.
$el 프로퍼티가 렌더링된 HTML 마크업과 함께 생성되며, 이 마크업을 DOM에 입력하는 것을 포함하는 과정입니다.
다시말해, 이 부분이 Virtual DOM 이 렌더되는 곳이고 결과가 실제 DOM에 적용되는것입니다.
이 모든것이 적용되기 전에, 우리는 beforeMount hook 에 접근할 수 있습니다.

4. mounted()

이제 vue instance는 위에서 설명한 mounted 상태(Virtual DOM 이 렌더되는 시점)로 이동합니다.

5. beforeUpdate()

data가 이벤트에 의해 변화가 되었다면, 실행중인 "Event loop"가 있다는 의미입니다.
어떤 data의 변화가 생길 경우, Virtual DOM 은 재랜더링 될것이고, 해당 DOM 은 변화합니다. 이 현상이 일어나기 전에, beforeUpdate hook이 호출됩니다.

6. updated()

DOM 이 update 된 후에, updated hook이 호출됩니다. 이 과정은 모든 data 변화에서 일어납니다.

7. beforeDestroy()

이제 lifecycle의 마지막 단계에서, 컴포넌트는 파괴됩니다.
이것이 일어날 때는 그 자체로 watcher나 event listener에 의해 그 자체가 정리되어 beforeDestroyed 상태로 이동하게 됩니다.

8. destroyed()

그리고 마지막으로 destroyed 라는 이름의 hook을 호출하게 되죠.

---

Vue Lifecycle Hook 사용하기

이번에는, lifecycle hooks 를 실제로 어떻게 사용하는지 알아볼 것입니다.

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    },
    beforeCreate: function() {
        alert('beforeCreate!')
    },
    created: function() {
        alert('created!')
    },
    beforeMount: function() {
        alert('beforeMount!')
    },
    mounted: function() {
        alert('mounted!')
    },
    beforeUpdate: function() {
        alert('beforeUpdate!')
    },
    updated: function() {
        alert('updated!')
    },
    beforeDestroy: function() {
        alert('beforeDestroy!')
    },
    destroyed: function() {
        alert('destroyed')
    }
});

<div id="app">
  <h1>{{ message }}</h1>
</div>

여기서는, 사실 message가 먼저 페이지에 생성되고, 그다음에 lifecycle hooks가 추가됩니다. 이 hooks들이 이름이 있는 function이고, Vue instance의 상위에 있다는 것을 주목하세요. key는 lifecycle hook의 이름과 일치해야하고, function은 순서가 없는 function입니다. 그러나, 이 hook functions는 Vue instance에 엮여있는 this context를 가지므로, 여러분은 data 프로퍼티, methods등에 접근할 수 있습니다. 보신것과 같이, 이름이 있는 function의 형태로 사용할 경우, ES6의 arrow function은 사용할 수 없습니다(?)

1. beforeCreate

Vue는 아직 아무것도 하지 않습니다

2. created

Vue가 event와 data Observation을 세팅할 때 나타납니다. 그러므로 Vue가 우리의 data 프로퍼티를 관찰할 수 있습니다.

3. beforeMount

Vue가 template를 컴파일 한 후와 Virtual DOM을 업데이트했을때 발생합니다.
그 다음에 template을 DOM에 mount하는데, 필수적으로 $el 프로퍼티를 Vue instance에 추가하고, 실제 DOM을 업데이트한다는 의미입니다.

4. mounted

호출되는 마지막 hook인데, 더이상 data를 Vue instance의 lifecycle동안에 업데이트 하지 않기 때문입니다.

5. beforeUpdate

Vue가 Virtual DOM을 업데이트 하기전에, 그리고 실제 DOM에 붙이기 전에 일어납니다.

6. updated

DOM이 실제로 업데이트 된 후에 일어납니다. 그러므로 이 hook에서 실제 DOM에 접근하는 것이 가능합니다. 그러나 정말 필요할 경우가 아니라면 하지않는것이 좋습니다. beforeUpdate와 updated hook은 특정 데이터가 Vue instance안에서 변화할 때 매번 호출됩니다. Vue는 DOM을 업데이트 할 필요가 없을 때 똑똑하게 변화를 감지할 수 있습니다. 이것은 Vue가 우리를 위해서 퍼포먼스를 최적화해주는 것입니다.

7. beforeDestroy

Vue instance가 destroyed되기 전에 발생합니다.

8. destroyed

destroyed 된 상태

---

동적 Vue.js 탬플릿 마운팅

지금까지, 우리는 HTML 요소를 구현 하기 위해(Vue 인스턴스를 컨트롤 하기 위해) Vue instance의 el 프로퍼티를 사용항였습니다. Vue instance의 메서드를 사용하여 <template>을 동적으로 mount 하는것이 가능합니다.

Vue instance는 unmounted 상태, 그러니까 "el"과 컴포넌트가 DOM과 연결되지 않은경우, $mount() 메서드에 CSS 선택자를 el 프로퍼티로써 전달하여 호출할 수 있습니다.

vm.$mount('#app');

이제 이 요소들은 "el" 프로퍼티와 같은 역할을 합니다. 이것은 그저 수동적으로 unmounted된 vue instance를 mount 시켜주는 방법입니다.

---

출처: codingexplained.com