关于Vue组件名大小写的一些问题

近期公司组织前端框架技术分享，我选了Vue，在理解过程中发现组件命名时可能会踩到的一些坑。网上搜索发现对此的一些解释都不太准确，写篇博客整理一下自己的一些试错经验吧。
全局组件在进行注册时，对组件名的大小写是没有进行任何限制的，大小写Aa下划线_短线-甚至是中文“啊”都可以进行注册。当然中文不能做为第一个字符，也不建议在组件名中使用中文（测试浏览器：谷歌、火狐）

<div id="app">
	<a新组件></a新组件>
</div>

Vue.component("a新组件", {
    template: "<h1>vue组件名不能大写吗</h1>"
});

说回正题，当我初次进行组件注册时，用的是标准的驼峰命名法，使用时也是复制的组件名，但是浏览器报错了，提示注册的组件不正确。

<div id="app">
	<newComponent></newComponent>
</div>

Vue.component("newComponent", {
    template: "<h1>vue组件名不能大写吗</h1>"
});

于是我复制了官网文档上的组件名粘贴到自己的页面后，显示是正常无误的，便怀疑是否是因为组件命名不正确，上网一查果然是，使用时组件名需在大写前加上-符号，并且大写转为小写。
但在接下来在我的试验过程中发现网上的说法并不准确。
首先，组件名首字母大写是不会对使用产生影响的

<div id="app">
	<Item></Item>
</div>

Vue.component("Item", {
    template: "<h1>vue组件名不能大写吗</h1>"
});

其次，组件名注册时中间夹杂大写，在使用时必须在大写前加上-符号，但是并不需要将大写转为小写，也就是说组件名在使用时不用区分大小写

<div id="app">
	<New-Component></New-Component>
</div>

Vue.component("NewComponent", {
    template: "<h1>vue组件名不能大写吗</h1>"
});

最后，组件的闭合标签是不需要加-符号，也不用区分大小写就可以被识别的。浏览器不会报错，但是对该组件后面的其他组件会造成影响，导致后面的组件无法渲染，所以慎用

<div id="app">
	<Qw-E-Rr></QwERr>
</div>

Vue.component("QwERr", {
    template: "<h1>vue组件名不能大写吗</h1>"
});

可以看得出来，组件名的讲究还是蛮多的，所以推荐大家在正式开发过程中还是使用全小写来对组件进行命名，方面后期维护，也减少了很多可能会出现的bug
希望本篇内容对看到的人有所帮助