요기 ✔️가 이번 게시글에서 다룰 내용!!
컴포넌트 내 특정 기능의 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API
<template>
<div class="input-label">
{{inputLabel}}
</div>
<input type="text"/>
</template>
<template>
<div>
<div class="input-label">
<!--{{inputLabel}}-->
{{state.inputLabe}}
</div>
<input type="text"/>
</div>
</template>
// Vue2.x → props, data, methods가 같은 계층에 존재
export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// login method
}
}
}
// Vue 3.x
// → props와 setup이 같은 계층에 존재, data는 state로,
// method들은 각각의 기명함수로 작성되어 한번에 반환되도록 변화
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
const login = () => {
// login method
}
return {
login,
state
}
}
}
// vue 3.x
<script setup lang="ts">
import { definedProps, reactive }
const props = defineProps<{
fiterKeys: string[];
}>();
const state = reactive(() => {
username: string;
password: string;
});
const login = () => {
// login method
}
</script>
state의 경우에도 그냥 선언이 아닌, vue reactive 사용 가능
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
export default {
setup() {
onBeforeMount(() => {
// ...
})
onMounted(() => {
// ...
})
onBeforeUpdate(() => {
// ...
})
onUpdated(() => {
// ...
})
onBeforeUnmount(() => {
// ...
})
onUnmounted(() => {
// ...
})
onActivated(() => {
// ...
})
onDeactivated(() => {
// ...
})
onErrorCaptured(() => {
// ...
})
}
}
// vue2
export default {
// ..
computed: {
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
}
// vue3
import { reactive, computed } from 'vue'
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
// ...
}
Tistory에서 보려면 👉요기로 클릭!
https://choppadontbiteme.tistory.com/86
https://velog.io/@bluestragglr/Vue3-무엇이-바뀌나요