[Vue.js][Ch3][컴포지션API] 기본 옵션과 라이프사이클

라이프사이클 훅

라이프사이클 훅에 접두사 "on"을 추가함으로서 컴포넌트의 라이프사이클 훅에 접근할 수 있다.

다음 표에는 setup() 내에 라이프사이클 훅이 호출되는 방법이 포함되어 있다.

 

Options API	setup 내부의 훅
beforeCreate	필요하지 않음*
created	필요하지 않음*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점이므로, 명시적으로 정의할 필요가 없다.

(beforeCreate()가 setup() 직전에 호출되고 created()가 setup() 직후에 호출되는 타이밍을 가짐)

 

App.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    doubleCount(){
      return this.count * 2;
    },
    reversedMessage(){
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message(newVal) {   // newVal : 변경된 message 값
      console.log(this.message, newVal);
    }
  },
  created() {   // 컴포넌트가 생성된 직후
    console.log(this.message);
  },
  mounted() {   // HTML가 컴포넌트가 연결된 직후
    console.log(this.count);
  },
  methods: {
    increase() {
      this.count += 1;
    },
    changeMessage() {
      this.message = 'Good?!';
    }
  }
}
</script>

상단 코드 내용을 vue.js의 컴포지션 API로 변경해보자.

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }}
  </h1>
</template>

<script>
// mounted -> onMounted
// onCreated는 존재하지 않다 => setup()에서 하면 되기 떄문에
import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {   // 컴포넌트가 생성된 직후 동작 -> created 메소드와 동일한 효과
    /* count와 관련된 부분 */
    const count = ref(0);
    const doubleCount = computed(() => {
      // count를 데이터로 쓰려면 value 속성 사용
      return count.value * 2;
    });
    function increase(){
      count.value += 1;
    }

    /* message와 관련된 부분 */
    const message = ref('Hello world!');
    const reversedMessage = computed(() => {
      // message를 데이터로 쓰려면 value 속성 사용
      return this.message.value.split('').reverse().join('');
    });
    watch(message, newValue => {  // 인수: 감시하고자 하는 데이터, 변경된 값
      console.log(newValue);
    })
    function changeMessage(){
      message.value = 'Good?!';
    }
    console.log(message.value);

    onMounted(() => {
      console.log(count.value);
    })

    return {
      /*
      count: count,
      message: message  속성과 값이 같으면 생략 가능
      */
      count,
      doubleCount,
      increase,
      message,
      reversedMessage,
      changeMessage
    }
  }
}
</script>