[Vue 3] props의 값을 변경해도 hot-reload가 적용되지 않는 이슈

어느 개발자·2022년 5월 4일
0

👻 발생한 이슈

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를 잃어버린다.

0개의 댓글