Vue script setup 中组件静默消失的原因:一次命名冲突排查
页面底部的反馈组件消失了,其他部分正常,控制台也没有明显 error。最后查到,<script setup> 里的状态名 popupStatus 和组件名 PopupStatus 只差大小写,模板中的 <popup-status> 被编译成了状态对象的引用。
改名能恢复显示,编译产物则解释了为什么会选错。这个问题涉及 Vue 的绑定分类、候选名顺序和运行时 warning;不同版本和组件写法的风险也有差异。
阅读顺序
| 篇目 | 要回答的问题 |
|---|---|
| 1.从静默消失定位到命名冲突 | 组件怎样静默消失,如何验证命名修复,哪些版本与写法需要分别判断。 |
| 2.顶层绑定怎样参与模板名字解析 | 顶层 import、变量和 props 怎样参与模板组件与指令解析。 |
| 3.检测组件与指令的绑定冲突 | 现成规则为什么可能漏检,项目内检查与上游诊断各承担什么职责。 |
阅读范围
案例以 Vue 3.5 的编译产物与源码为主要依据,其他版本、运行时注册和 Vue 2 方言分别说明。完整 SFC、编译脚本和源码节选可从对应段落打开。
章节定位
按章节名可以直接进入对应正文或补充材料。
1.从静默消失定位到命名冲突:现象 · 修复方式 · 文档里写了什么 · 版本边界 · 为什么控制台没有明显报错 · 这和显式组件注册有什么不同 · 怎么规避 · 最小复现 · 现场的完整组件导入 · 现场的完整状态解构 · 改名后的完整状态解构 · 改名后的产物 · Vue 2.7 之前的第三方方言。
2.顶层绑定怎样参与模板名字解析:为什么会优先命中普通变量 · 变量先被归类 · 分类再参与解析 · 组件之外还有没有同类问题 · walkDeclaration 的完整节选。
3.检测组件与指令的绑定冲突:静态检查能不能发现 · 本地护栏之外 · 总结。