모든 글은 다음 블로그를 참고하여 작성하였습니다.
https://gyoogle.dev/blog/

Vue.js 라이프 사이클

Creation, Mounting, Updating, Destruction

lifeCycle

Creation

컴포넌트 초기화 단계

Creation 단계에서 실행되는 훅(hook)들이 라이프사이클 중 가장 먼저 실행됨

아직 컴포넌트가 DOM에 추가되기 전이며 서버 렌더링에서도 지원되는 훅임

클라이언트와 서버 렌더링 모두에서 처리해야 할 일이 있으면, 이 단계에 적용하자

beforeCreate 가장 먼저 실행되는 훅 아직 데이터나 이벤트가 세팅되지 않은 시점이므로 접근 불가능
created 데이터, 이벤트가 활성화되어 접근이 가능함 하지만 아직 템플릿과 virtual DOM은 마운트 및 렌더링 되지 않은 상태임

Mounting

DOM 삽입 단계

초기 렌더링 직전 컴포넌트에 직접 접근이 가능하다.

컴포넌트 초기에 세팅되어야할 데이터들은 created에서 사용하는 것이 나음

beforeMount 템플릿이나 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행됨 많이 사용하지 않음
mounted 컴포넌트, 템플릿, 렌더링된 DOM에 접근이 가능함 모든 화면이 렌더링 된 후에 실행
주의할 점

부모와 자식 관계의 컴포넌트에서 생각한 순서대로 mounted가 발생하지 않는다. 즉, 부모의 mounted가 자식의 mounted보다 먼저 실행되지 않음

부모는 자식의 mounted 훅이 끝날 때까지 기다림

Updating

렌더링 단계

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 다시 렌더링 되면 실행됨

디버깅을 위해 컴포넌트가 다시 렌더링되는 시점을 알고 싶을 때 사용 가능

beforeUpdate 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행됨

(돔이 재 렌더링 되고 패치되기 직전 상태)

updated 컴포넌트의 데이터가 변하여 다시 렌더링 된 이후에 실행됨 업데이트가 완료된 상태이므로, DOM 종속적인 연산이 가능

Destruction

해체 단계

beforeDestory 해체되기 직전에 호출됨 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 할 때 유용함
destroyed 해체된 이후에 호출됨 Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거됨

추가로 사용하는 속성들

computed 템플릿에 데이터 바인딩할 수 있음

<div id="example">
  <p>원본 메시지: ""</p>
  <p>역순으로 표시한 메시지: ""</p>
</div>

<script>
    new Vue({
        el: '#example',
        data: {
            message: '안녕하세요',
        },
        computed: {
            // 계산된 getter
            reversedMessage: function () {
                // `this` 는 vm 인스턴스를 가리킵니다.
                return this.message.split('').reverse().join('');
            },
        },
    });
</script>

message의 값이 바뀌면, reversedMessage의 값도 따라 바뀜

watch 데이터가 변경되었을 때 호출되는 콜백함수를 정의 watch는 감시할 데이터를 지정하고, 그 데이터가 바뀌면 어떠한 함수를 실행하라는 방식으로 진행

Version 3.0

기술 면접 준비 (11) - Vue.js (1)