Vue 2中Vite HMR更新组件后无法保留状态的问题排查

这个问题其实不是你遗漏了配置，而是Vite官方的@vitejs/plugin-vue2对Vue 2组件的HMR默认行为就是替换整个组件实例，所以组件的响应式状态会被重置。Vue 2本身的HMR机制和Vue 3差异较大，Vite的Vue 2插件默认没有做状态保留的处理。

下面给你两种可行的解决方案：

方案1：启用插件的状态保留HMR模式 #

在vite.config.js中，给@vitejs/plugin-vue2配置hmr: { preserveState: true }，插件会自动尝试保留组件的现有状态：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [
    vue({
      hmr: {
        preserveState: true
      }
    })
  ]
})

这个方案是最省心的，适合大多数常规场景。需要注意的是：如果你的组件修改涉及data结构变化（比如新增/删除data属性），状态保留可能失效，此时重置状态属于正常逻辑。

方案2：手动编写组件的HMR接受逻辑 #

如果方案1无法满足你的需求，或者你需要更精细的状态控制，可以在组件的script中手动添加HMR处理代码，自定义状态保留规则：

<template>
  <div>
    {{ count }}
    <button @click="count++">increment</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};

// 手动处理HMR，保留指定状态
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    const instance = this.$vnode.componentInstance;
    // 合并新组件的配置选项
    Object.assign(instance.$options, newModule.default);
    // 手动保留count状态
    instance.count = instance.count;
    // 强制组件更新渲染
    instance.$forceUpdate();
  });
}
</script>

这种方式灵活性更高，但需要你自行处理状态的保留逻辑，适合复杂组件的定制化场景。

内容的提问来源于stack exchange，提问作者JonasT