Frontend/Vue
[VUE + TYPESCRIPT] Life Cycle
romeoh
2022. 3. 15. 16:37
반응형
<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>
반응형