Vue 라이프사이클 훅

Created, Mounted, Updated, Destroyed/(.0 )

Created

• Vue.js 컴포넌트가 생성된 후(인스턴스가 생성된 후)
• 즉, DATA에 접근이 가능한 상태

Mounted

• HTML 구조에 연결이 되고난 후
• DATA와 HTML 구조에 접근이 가능한 상태

Updated

• Virtual DOM을 통해서 화면에 그려져있는 내용과 다시 그려야하는 내용을 비교
• 다시 그려야하는 내용을 re-render
• re-render되고 나서가 바로 [Updated]
• Vue.js의 핵심 : 반응성

Destroyed(2.0)/Unmounted(3.0)

Vue2.0

• vm.$destroy()
• component와의 연결이
  - 끊어지기 직전: [beforeDestroy]
  - 끊어진 후 : [destroyed]

Vue3.0

• app.unmounted()
• component와의 연결이
  - 끊어지기 직전: [beforeUnmount]
  - 끊어진 후 : [unmounted]