이전 글에서보면 새로운 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