是否应将自定义元素仅用作标记以提升开发效率与可读性？

让我逐个拆解你的问题，帮你理清要不要用自定义元素当标记这件事：

1. div与未绑定组件的自定义元素哪个性能更优？ #

其实几乎没有差异。当你使用未注册的自定义元素（比如<t-row>）时，浏览器会把它当作HTMLUnknownElement处理——这和<div>这种标准HTMLElement在渲染流程上的区别微乎其微。浏览器解析DOM的核心是处理节点类型、属性和子元素，而非标签名本身。除非你给自定义元素注册了自定义组件逻辑（比如Vue组件或原生Custom Elements），才会额外增加生命周期处理的开销，但你这里只是把它当标记用，所以性能和普通div基本一致。

2. 字符数量对1000个元素的影响有多大？ #

这个影响可以忽略不计。虽然<t-row>比<div class="row">字符少，但实际带来的收益非常有限：

• 模板编译阶段：字符少确实会让解析快一点点，但对于现代前端构建工具（比如Vite、Webpack）来说，这点差异完全感知不到。
• 网络传输：打包后的代码经过gzip压缩后，标签名字符的差异会被进一步抹平。
• 运行时渲染：浏览器处理DOM节点不关心标签名的长度，只关心节点类型和结构。1000个元素的场景下，真正影响性能的是DOM节点总数、样式复杂度（比如大量重绘重排）、事件绑定等，标签名字符的差异根本不是瓶颈。

3. 不绑定自定义组件的情况下使用自定义元素是否属于良好实践？ #

这取决于你的团队约定，但只要符合规范且达成共识，就是可行的：

• 优点：模板更简洁，可读性更高——在大型项目里，<t-row>比<div class="row">更直观，能快速识别出这是一个行容器，减少视觉噪音。
• 注意事项：
  • 必须遵循HTML自定义元素的命名规范：标签名必须包含连字符（你用的t-前缀符合要求，避免和未来的标准元素冲突）。
  • 要和团队成员对齐：确保大家都理解这种写法只是“语义化标记”，不是真正的组件，避免后续维护混淆。
  • 避免未来冲突：如果以后打算把<t-row>改成真正的Vue组件，直接替换即可，不会有语法冲突。

4. 在Vue中配置ignoredElements忽略[/^t-/]这类元素会对性能产生何种影响？ #

反而会轻微提升性能。Vue在编译模板时，会默认检查每个元素是否是已注册的组件，如果遇到未注册的元素，会抛出警告。配置ignoredElements后，Vue会跳过对这些前缀元素的组件校验逻辑，减少了编译阶段的检查步骤，反而能让模板编译更快一点。运行时则完全没有额外开销，因为这些元素最终都会被当作普通DOM节点处理。

最终结论：完全可以这么做！ #

如果使用自定义元素作为标记能帮你节省编写时间、提升模板可读性，那完全没问题。理由如下：

• 性能层面：和div几乎无差异，甚至编译时能因为ignoredElements小幅度提速。
• 规范层面：符合HTML自定义元素的命名规则，不会有兼容性问题（所有现代浏览器都支持未知自定义元素）。
• 维护层面：简洁的标签能降低大型模板的复杂度，只要团队达成共识，后续维护成本更低。

内容的提问来源于stack exchange，提问作者Jens Törnell