Subscribe on changes!

[bug] Lifecycle hooks has been called twice in HMR when I use "v-for + ref" and "script setup" in RouterView.

avatar
Mar 17th 2023

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 trigger hot 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?

动画 1679047586712

avatar
Mar 17th 2023

Thanks very much, it took me a while to before I checked the chrome dev tools.

avatar
Mar 17th 2023

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. 🙁

avatar
Mar 17th 2023

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

avatar
Aug 16th 2023

I am facing this issue even without v-for. I have a ref to a custom component whose onMounted function is being called twice

avatar
Oct 8th 2023

Upvote this issue, I still reproduce using latest Vue version.