Vue 라이프사이클

MVVM 패턴은 View, View Model, Model로 구성되어 있다. View는 View Model을 알지만, View Model은 View를 알지 못한다. 또 View Model은 Model을 알지만, Model은 Vew Model을 알지 못한다. 이런 구조를 통해 UI로부터 비즈니스 로직과 프레젠테이션 로직을 분리할 수 있다.

View : View의 역할은 UI에 관련된 것을 다룬다. 

View Model : View Model의 역할은 View가 사용할 메서드와 필드를 구현하고, View에게 상태 변화를 알린다. View Model에서 제공하는 메서드와 필드가 UI에서 제공할 기능을 정의하지만, View에 의해 이 기능을 어떻게 보여줄 것인지 결정한다.

Model : Model은 비즈니스 로직과 유효성 검사를 포함한다. 

Vue에서의 MVVM

Vue는 ViewModel 계층에 집중한 프레임워크이다. 이 계층을 통해서 양방향 데이터 바인딩을 가능하게 한다. Vue에서 Model은 데이터이며, 데이터를 변경할 경우 Vue 인스턴스에 변경을 알리며 Vue의 Getter/Setter로 객체의 프로퍼티를 변경한다.

View는 UI 요소이며, View Model에 의해 관리된다. View 요소는 vm.$el로 설정되어 Vue 인스턴스 생성당시에 컴파일되어 View Model의 메서드등이 바인딩 된다. View Model은 Vue 인스턴스이며 View에 필요한 기능, 필드를 갖고 Model과 View를 연결하는 역할을 수행한다.

 

보통 Vue.js를 활용하고자 할 때는 아래코드와 같이 js를 바탕으로 new Vue 키워드를 통해 Vue 인스턴스를 생성한다.

// Vue 2.x
import Vue from 'vue';
import App from 'App.vue';

const vm = new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

여기서 new Vue를 통해 생성되는 Vue 인스턴스가 위 그림에서 중앙에 놓인 View Model 역할을 하게된다. 이는 Model과 View를 동기화해주는 매개체이다. 

View는 실제 화면에 렌더링되는 DOM을 뜻한다. 그리고 Vue는 생성된 인스턴스에 $el이라는 내부 프로퍼티를 통해, View 역할을 하는 DOM을 관리하게 된다. 이때 View Model 역할을 하는 Vue 인스턴스 내부에는 활용하는 데이터들에 대해 Observe 기능이 걸려 있고, 이로인해서 데이터 변경시 notify 로직이 발생해, 해당 로직을 바탕으로 그 데이터를 사용중인 View 영역의 DOM이 업데이트가 된다.

Model은 js 객체를 말한다. 즉, Vue의 data 영역에 정의되는 것들이라고 볼 수 있다.

Model에 대한 getter/setter 흐름도

라이프 사이클

Vue 인스턴스가 생성될 때, 미리 사전에 정의된 몇 가지 단계를 거치게 되는데 이를 라이프사이클이라고 한다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다.

Creation : 컴포넌트 초기화 단계

creation hooks은 라이프사이클에서 가장 먼저 실행이 된다. 컴포넌트가 DOM에 추가되기 전에 수행하며 다른 Hooks와 달리 서버 렌더링 중에서도 실행이 된다. 따라서 클라이언트 렌더링 및 서버 렌더링 과정 모두에서 컴포넌트를 설정할 필요가 있다면 해당 단계에서 처리한다. 해당 단계에서는 DOM이 추가되기 전이기 때문에 DOM에 접근하거나 this.$el을 사용할 수 없다.

beforeCreate

모든 hook 중에 가장 먼저 실행되는 hook으로, 아직 data와 event(vm.$emit, vm.$off, vm.$on, vm.$once)가 세팅되지 않은 시점이다. 

created

data와 events가 활성화되어 접근할 수 있다. 하지만 여전히 템플릿과 가상 DOM은 마운트 및 렌더링이 되지 않은 상태이다. 주로 데이터 초기화나 이벤트 리스너를 선언해야 할 때 사용한다. 

Mounting : DOM 삽입 단계

Mounting 단계는 초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있다. 서버렌더링에서는 지원하지 않는다. 초기 렌더링 직전에 DOM을 변경하고자 한다면 이 단계를 활용할 수 있다. 

beforeMount

템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다.

mounted

일반적으로 가장 많이 사용되는 mounted Hook으로, 가상 DOM이 실제 DOM에 부착되고 난 이후에 실행되므로, 모든 요소에 접근이 가능하다.

mount와 create 관계

일반적인 경우에, 부모와 자식 컴포넌트 간의 mounted Hook 순서는 위 그림과 같이 실행이 된다. 따라서 부모는 자식의 mounted Hook이 끝나고 난 뒤에 실행이 된다. 따라서 모든 화면이 렌더링이 된 이후에 실행하려면 this.$nextTick을 이용하면 된다.

Updating : Diff 및 리 렌더링 단계

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 리렌더링이 발생하면 실행된다. 디버깅을 위해 컴포넌트가 다시 리렌더링이 되는 시기를 알아야하는 경우 사용한다.

beforeUpdated 

컴포넌트 데이터가 변경되고 업데이트 주기가 시작된 후 DOM이 패치되고 다시 렌더링되기 직전에 실행된다. 

updated

데이터가 변하여 리렌더링이 일어난 뒤 실행된다. 프로퍼티가 변경된 후 DOM에 접근해야 할 때 사용한다.

Destruction : 해체 단계

컴포넌트가 해체되고 DOM에서 제거될 때 실행된다.

beforeDestroy

해체 직전에 실행이 되며 컴포넌트는 여전히 완전하게 존재한다. 주로 이벤트 리스너나 reactive subscription을 제거할 때 사용한다.

destroyed

인스턴스가 해체되고 난 직후에 실행된다. 해체가 끝난 이후라서 인스턴스 속성에 접근할 수 없다.

 

참조

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

Vue 라이프사이클 이해하기 - 재그지그의 개발 블로그

https://medium.com/witinweb/vue-js-라이프사이클-이해하기-7780cdd97dd4

Vue.js 2.0 라이프사이클 이해하기

https://fomaios.tistory.com/entry/Design-Pattern-MVVMModel-View-ViewModel-패턴이란-feat-Swift

[Design Pattern] MVVM(Model - View - ViewModel) 패턴이란? (feat. Swift)

https://fomaios.tistory.com/entry/Design-Pattern-MVVMModel-View-ViewModel-패턴이란-feat-Swift

[Design Pattern] MVVM(Model - View - ViewModel) 패턴이란? (feat. Swift)

https://velog.io/@sensecodevalue/VUE의-MVVM-패턴-이해와-MVC-MVP에대한-간단-설명

VUE의 MVVM 패턴 이해

https://blinders.tistory.com/111

[Vue.js] Vue는 MVVM 패턴과 관련이 없지만