Vue 2 + Vuetify 2.7 中异步组件导致模态框点击失效的解决方案-js教程-PHP中文网

在 vue 2 + vuetify 2.7 项目中，使用动态 import() 异步加载 tab 子组件会导致对话框（v-dialog）首次打开后无法再次触发点击事件——该问题仅在生产环境复现，根本原因是异步组件加载引发的非预期重渲染与事件绑定丢失。

在 vue 2 + vuetify 2.7 项目中，使用动态 import() 异步加载 tab 子组件会导致对话框（v-dialog）首次打开后无法再次触发点击事件——该问题仅在生产环境复现，根本原因是异步组件加载引发的非预期重渲染与事件绑定丢失。

问题本质：异步组件加载破坏了响应式生命周期

你遇到的现象——“按钮点击一次后失效”“开发环境正常、生产环境异常”——并非 Vue 或 Vuetify 的 Bug，而是 Vue 2 的异步组件机制与 Vuetify v-dialog 的持久化渲染逻辑冲突 所致。

当绑定的组件是异步导入（如 () => import('./ProjectInformation.vue')）时：

Vue 在首次渲染时会创建一个占位节点；
当组件加载完成，Vue 会销毁旧节点并挂载全新实例；
若该操作发生在 v-dialog 内部（尤其配合 v-model + persistent + fullscreen），Vuetify 可能因 DOM 重建而丢失对父级事件监听器（如按钮的 @click）的引用；
更关键的是：生产环境下 Webpack 的代码分割 + Tree-shaking 会启用更激进的模块缓存策略，导致异步组件 resolve 后的重新挂载行为更易触发根组件（如）的强制重渲染，进而使外层按钮的事件监听器被剥离。

✅ 验证线索已在你的排查中体现：

“整个组件被重新渲染” → 指向响应式依赖或模板结构变化；

“移除 Tabs 内容后问题消失” → 直接锁定是罪魁祸首；

“仅生产环境发生” → 异步加载在 dev server 下延迟不明显，而 prod bundle 的 chunk 加载时机与 Vue 渲染队列耦合更敏感。