Vue3 Lifecycle

Vue3 Composition API의 Lifecycle

이전 글에서보면 새로운 ref, computed를 vue라는 객체에서 빼와서 쓰는걸 봤을 것이다.
Lifecycle도 ref, computed처럼 빼와서 써야하지만 조금 방식이 달라졌다.

앞에 on이라는 것이 붙고 카멜케이스형식으로 변경해서 써야한다.

비교하기

[vue2]

<template>
  <div id="app">
    <h1 @click="increase">
      {{ count }} / {{ doubleCount }}
    </h1>
    <h1>
      {{ massage }} / {{ reverceMassage}}
    </h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      massage:"Hello world",
      count:0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
    reverceMassage() {
      return this.massage.split('').reverse().join('');
    }
  },
  watch: {
    count(newVal) {
      console.log("watch::", newVal);
    }
  },
  created(){
    console.log(this.doubleCount)
  },
  mounted(){
    console.log(this.reverceMassage)
  },
  methods: {
    increase() {
      this.count += 1;
    }
  }
}
</script>

---

[vue3]

<template>
  <div id="app">
    <h1 @click="increase">
      {{ count }} / {{ doubleCount }}
    </h1>
    <h1>
      {{ massage }} / {{ reverceMassage }}
    </h1>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup(){
    const massage = ref("Hello world");
    const reverceMassage = computed(() => { return massage.value.split('').reverse().join('') })
    
    const count = ref(0)
    watch(count, (newVal) => {
      console.log("watch::", newVal)
    })
    const doubleCount = computed(() => count.value * 2)
    function increase() {
      return count.value += 1;
    }
	
    //beforeCreated, created는 setup안에서 발동
    console.log(doubleCount.value);
	
    //mounted -> onMounted로 쓰임
    onMounted(()=> {
      console.log(reverceMassage.value)
    });
    
    return {
      //라이플 사이클, watch는 리턴해주지 않습니다.
      massage,
      reverceMassage,
      count,
      doubleCount,
      increase
    }
  }
}
</script>

vue3의 컴포지션API 소스를 보면 기본적으로 setup함수안에서는 라이플사이클이 beforeCreated, created로 작동하고
그 이후 사이클부터 가져와서 쓰게 되어있다.

watch같은 경우도 가져와 쓰지만 return 해주지 않는다.

마무리

위와 같은 문법은 한 문서에서 많은 함수들이 일어날때 보기 좋아보인다.
기존에는 위에 있는 데이터를 보고 아래 함수를 추적하고 그랬지만 이제는 흐름대로 내려오는 기분이다.

그렇다고 vue3에서 vue2문법을 못쓰는 것이 아니니 적절히쓰면 된다.

---

출처 : https://v3.vuejs-korea.org/guide/composition-api-lifecycle-hooks.html