stackblitz

https://stackblitz.com/edit/vitejs-vite-thzryu

problem

I use the v-if to rerender the component, there is a problem in builded production, input element will have a cache text in it. but dev works fine, im confused about it，which part cause the problem？

reproduce

1. npm run dev, enter something in input , click reload button. works fine in dev.
2. npm run build
3. npm run preview, enter something in input , click reload button. text still in input

Originally posted by @PYPARA in https://github.com/vuejs/core/discussions/6452

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { ref, nextTick } from 'vue';
const alive = ref(true);

function reload() {
  alive.value = false;
  nextTick(() => {
    alive.value = true;
  });
}
</script>

<template>
  <div v-if="alive">
    <input type="text" />
  </div>

  <button @click="reload">reload</button>
</template>

<style scoped>
button {
  margin-top: 20px;
}
</style>

works fine in sfc.

@edison1105 Thank you.

https://cn.vuejs.org/guide/extras/rendering-mechanism.html#static-hoisting

https://github.com/vuejs/core/discussions/6452