Vue 3로 Normal Button 컴포넌트를 생성하여 공통화를 하던 중 props의 내용을 변경해도 hot-reload가 적용되지 않는 이슈가 발생했다.
App.vue
<template>
<NormalButton label="This is normal button" @click="log"></NormalButton>
</template>
<script setup lang="ts">
import NormalButton from './components/button/NormalButton.vue';
const log = () => console.log('normal button clicked');
</script>
NormalButton.vue
<template>
<el-button
:disabled="disabled"
:style="combinedButtonStyles"
@click="emit('click')">
{{ props.label }}
</el-button>
</template>
<script setup lang="ts">
const { label, disabled, style } = withDefaults(
defineProps<{
label?: string;
disabled?: boolean;
style?: object;
}>(),
{
label: 'Normal Button',
disabled: false,
}
);
const emit = defineEmits<{ (e: 'click'): void }>();
const defaultButtonStyles = { backgroundColor: '#FF4800', color: 'white' };
const combinedButtonStyles = { ...defaultButtonStyles, ...props.style };
</script>
App.vue
에서 props인 label
의 내용을 변경하면 hot-reload가 적용되지 않았고, 브라우저를 새로고침하면 적용되는 현상이 발생했다.
이슈의 원인이 Vite 혹은 Element-Plus에 있을 것이라고 생각하여 삽질을 했는데, 결론적으로 props를 destructuring하여 발생한 이슈였다.
props를 destructuring 하면 reactivity를 잃어버리기 때문에, props
로 선언하여 props.label
로 사용하여야 한다.
App.vue
const props = withDefaults(
defineProps<{
label?: string;
disabled?: boolean;
style?: object;
}>(),
{
label: 'Normal Button',
disabled: false,
}
);
props를 destructuring 하면 reactivity를 잃어버린다.