[bug] Lifecycle hooks has been called twice in HMR when I use "v-for + ref" and "script setup" in RouterView.
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-fx7e3m?file=src/views/HelloWorld.vue
Steps to reproduce
- Create a vue3 repo with
vue-router
- Use Composition Api in the components of
RouterView
- Use
v-for + ref
attribute on the html element - Define a proxy object to the
ref attribute
- Change and save the content in
<script setup>
to triggerhot module replacement
What is expected?
onMounted will be Called once
What is actually happening?
onMounted will be Called twice.
System Info
"mounted" will be print twice on the browser console
Any additional comments?
I did simplify the code by removing line 12: <p v-for="(x, i) in 10" :key="i" ref="pRefs">{{ x }}</p>
.
but still the same thing happens. 🙁
Fix the problem. I believe that setup(){} function helped somewhat. The setup function is only executed only one in vue.js 3, if I am correct.
https://stackblitz.com/edit/vitejs-vite-nzzz5i?file=src%2Fviews%2FHelloWorld.vue
I am facing this issue even without v-for
.
I have a ref
to a custom component whose onMounted
function is being called twice