[JS/Vue] 라이프 사이클

주로 아래의 UDemy 강좌를 바탕으로 작성되었습니다.
Vue.js+Firebase로 만든 페이지 응용 프로그램

가상 라이프 사이클

문서의 라이프 사이클 그림은 다음과 같습니다.

Vue 인스턴스 - Vue.js 참조
대체적으로 정의하면 다음과 같은 절차는 각각 제작 전, 후가 존재한다.

Vue 감지 생성

설치

DOM 업데이트

Vue 감지 삭제

또한 이 생명주기에는 생명주기 연결에 처리를 추가할 수 있다.
생명주기 연결은 위의 그림에 쓰인 beforeCreate, created 등 붉은 테두리로 둘러싸인 것을 가리킨다.
그 안에 각양각색의 설치를 통해 사소한 행위의 변경을 할 수 있다.

Vue 감지 생성

beforeCreate, created 는 인스턴스 작성에 해당합니다.
다음과 같이 인스턴스를 만들 수 있습니다.

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

마운트

beforeMount、mounted.
정의에 관해서는 아래에서 이해하기 쉽다.
기존 DOM 요소는 Vue입니다.js로 생성된 DOM 요소로 대체합니다.
Vue.js 입문 제2장 Vue.js 시작 (구조 함수, 마운트, 데이터) - Qiita 참조

가상 DOM

beforeUpdate、updated.
차별점을 변경한 곳에서만 쇄신하겠다는 생각이다.
왜 가상 DOM이라는 개념이 우리 영혼을 떨리게 하는지 - Qiita
가상 DOM이 정말'빠르다'고요?DOM 작업의 새로운 사고방식을 이해하고 프레임워크를 구현합니다. - 엔지니어 Hub/젊은 웹 엔지니어의 경력!

실험

아래와 같은 html, js를 정의하고 console에 메시지를 다시 쓰면beforeUpdate,updated이 이동하는 것을 볼 수 있습니다.

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

const vm = new Vue({
  el: '#app',
  data() {
    return {
      message: 'こんにちは'
    }
  },
  beforeUpdate() {
    console.log('再描画前')
  },
  updated() {
    console.log('再描画後')
  }
})

window.vm = vm

웹 사이트 축소 이미지

아래 사이트에서 각종 js의 설치를 시도할 수 있습니다.
매우 편리하다.
JSFiddle - Code Playground

기타 참고 보도

Vue의 라이프 사이클을 완전히 이해했습니다. - Qiita.