[Vue.js] script안에 들어가는 옵션 정리 /라이프 사이클 훅

// test.vue

<template>

</template>

<script>
    export default {
      name: "test"
    };
</script>

<style scoped>

</style>

 

vue로 프로젝트를 하다보면 파일을 만들게 되면 위 구조로 만들고 시작을 하는데

그중 <script>  </script> 안에 들어가는 옵션들을 정리 해보자

 

<script>

import Test2 from "../../components/Test2";

export default {
  name: "Test",
  mixins: [],
  components: {Test2},
  inject: [],
  provide() {
    return {}
  },
  props: {},

  // 사용할 데이터 , 객체 또는 배열로 지정하는것이 일반적
  data() {
    return {
      message:'hello',
      boolean:'false',

    }
  },

  //  라이프 사이클 훅
  beforeRouterEnter() {
  },
  created() {
  },
  mounted() {

  },
  beforeDestroy() {
  },
  destroyed() {
  },

  //  산출 속성 데이터
  // data와 비슷하게 사용하는데  함수로 인해 산출되는 데이터라고 보면 된다.
  computed: {
    computedMessage:function(){
      return this.message+'!'
    }
  },

  // 사용할 메서드
  methods: {
   // 하고 싶은 처리
    myTest(){
      // 처리 할 내용
    }
  },
  watch: {},
};
</script>

 

 

라이프 사이클 훅

- data와 methods는 자유롭게 정의할 수 있지만 라이프 사이클 훅은 사용할수 있는 메서드가 정해져 있다.

 

beforeCreate : 인스턴스가 생성되고, 리액티브 초기화가 일어나기전

create     : 인스턴스가 생성되고, 리액티브 초기화가 일어난 후

beforeMount   : 인스턴스가 마운트되기 전

mounted  : 인스턴스가 마운트 된 후

beforeUpdate   : 데이터가 변경되어 DOM에 적용되기 전

updated   : 데이터가 변경되어 DOM에 적용된 후

beforeDestroy   : Vue 인스턴스가 제거되기 전 

destroyed    : Vue 인스턴스가 제거된후

errorCaptured   : 임의의 자식 컴포넌트에서 오류가 발생했을때

 

아래 다이어그램에서 위 라이프 사이클 훅이 실행되는 시점을 다시 한번 확인해보자

 

Vue.js 라이프 사이클 시점