[VUE + TYPESCRIPT] Life Cycle

VUE.JS 목록

<template>
  <div>
    라이프 사이클
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class TestLifeCycleView extends Vue {
  /**
   * created는 DOM이 생성되기 전에 실행됨
   */
  beforeCreate () {
    console.log('beforeCreate')
  }

  created () {
    console.log('created')
  }

  /**
   * Dom이 생성되고 실행됨
   * 모든 Component가 마운트 되었다고 보장하지 않음
   */
  beforeMount () {
    console.log('beforeMount')
  }

  mounted () {
    console.log('모든 Component가 마운트 되었다고 보장하지 않음')
    this.$nextTick(() => {
      console.log('모든 Component가 마운트 되었다고 보장함')
    })
  }

  /**
   * 재 렌더링 될 때 실행됨
   */
  beforeUpdate () {
    console.log('beforeUpdate')
  }

  updated () {
    console.log('updated')
  }

  /**
   * Dom이 제거 될 때 실행됨
   */
  beforeDestroy () {
    console.log('beforeDestroy')
  }

  destroyed () {
    console.log('destroyed')
  }
}
</script>

 

VUE.JS 목록