After making changes to a nested component in Vue and saving it, I noticed that the Vite HMR kept reloading the component, resulting in a warning from Vue: Maximum recursive updates exceeded...
Check out the online demo on stackblitz. Make a change in Child1.vue and save. You will see the same information repeated 101 times along with a warning in the console.
You can also try the code below using Vue3.x + Vite4.x/5.x:
Child1.vue
<script setup lang="ts">
const emits = defineEmits(['list-change']);
emits('list-change', ['a', 'b', 'c']);
// make a change and save
console.log('Child1.vue setup');
</script>
Child2.vue
<script setup lang="ts">
const props = defineProps<{
list: string[];
}>();
</script>
App.vue
<template>
<Child1 @list-change="handleListChange"></Child1>
<Child2 :list="list"></Child2>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Child1 from './components/Child1.vue';
import Child2 from './components/Child2.vue';
const list = ref<string[]>([]);
const handleListChange = (newList: string[]) => {
list.value = newList;
};
console.log('App.vue setup');
</script>
Appreciate any assistance provided.