Vue - Lifecycle Hooks

Lifecycle Hooks

Lifecycle Hooks | Vue.js

Llife-cycle-Hooks

created	최초(아무것도 없는 상태), data 가져오기
mounted	그림틀, 그래프
updated	바뀐걸 감지해서 변화
destroyed	결과물

Life-cycle-Hooks 그림

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

실행 결과

컴퍼넌트 나갈 때 나타난다