There are only two things in Computer Sciences: cache invalidation and naming things.
—— Phil Karlton
诚如上述所言，编程中变量命名确实令人很头疼。我们模糊地知道，Vue 组件的名称最好不要和原生 HTML 标签相同。为了避免重名，通常会在组件名称前面加上一个前缀，如 el-button、el-input、el-date-picker。这通常不会有什么问题，但有时候你的模板中混杂了原生 HTML 标签和组件标签，要想区分它们并不是很容易。
当我看到 Ant.design 的 React 组件是下面这样的时候，我感觉到一种自由的味道。首先，组件名可以使用原生 HTML 标签名，意味着再也不用较劲脑汁去规避原生 HTML 标签了。另外，这些组件都使用了首字母大写标签名，使它们很容易地与原生小写的 HTML 标签区分。
ReactDOM.render( <div> <Button type="primary">Primary</Button> <Input placeholder="Basic usage" /> <Select defaultValue=".com" style={{ width: 70 }}> <Option value=".com">.com</Option> <Option value=".jp">.jp</Option> <Option value=".cn">.cn</Option> <Option value=".org">.org</Option> </Select> </div>, mountNode );
受 Ant.design 的启发，我思考 Vue 组件命名能不能达到同样的效果呢？要找到答案，必须摸清楚 Vue 组件命名到底有什么限制。下面将分别从 Vue 1.0 和 Vue 2.0 来谈谈组件命名的机制：
Vue 1.0 组件命名机制
组件注册
我们以一个最简单的例子来研究 Vue 组件的注册过程：
Vue.component('MyComponent', { template: '<div>hello, world</div>' })
通过跟踪代码的执行过程，发现对组件的名称有两处检查。
检查名称是否与 HTML 元素或者 Vue 保留标签重名，不区分大小写。可以发现，只检查了常用的 HTML 元素，还有很多元素没有检查，例如 button、main。
if (type === 'component' && (commonTagRE.test(id) || reservedTagRE.test(id))) { warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id); } // var commonTagRE = /^(div|p|span|img|a|b|i|br|ul|ol|li|h1|h2|h3|h4|h5|h6|code|pre|table|th|td|tr|form|label|input|select|option|nav|article|section|header|footer)$/i; // var reservedTagRE = /^(slot|partial|component)$/i;
检查组件名称是否以字母开头，后面跟字母、数值或下划线。
if (!/^[a-zA-Z][\w-]*$/.test(name)) { warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.'); }
基于以上两点，可以总结出组件的命名规则为：组件名以字母开头，后面跟字母、数值或下划线，并且不与 HTML 元素或 Vue 保留标签重名。
然而我们注意到，在上面的检查中，不符合规则的组件名称是 warn 而不是 error，意味着检查并不是强制的。实际上，Vue 组件注册的名称是没有限制的。你可以用任何 JavaScript 能够表示的字符串，不管是数字、特殊符号、甚至汉字，都可以成功注册。
模板解析
虽然 Vue 组件没有命名限制，但是我们终究是要在模板中引用的，不合理的组件名可能会导致我们无法引用它。
为了弄清楚 Vue 是如何将模板中的标签对应到自定义组件的，我们以一段简单的代码说明：
new Vue({ el: '#app', template: '<my-component></my-component>' })
总体来说，模板解析分为两个过程：
首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent> 时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。
然后，通过标签名寻找对应的自定义组件。**匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。**例如 <my-component> 会依次匹配 my-component、myComponent、MyComponent。camelCase 和 PascalCase 的代码如下：
var camelizeRE = /-(\w)/g; function camelize(str) { return str.replace(camelizeRE, toUpper); } function toUpper(_, c) { return c ? c.toUpperCase() : ''; } function pascalize(str) { var camelCase = camelize(str); return camelCase.charAt(0).toUpperCase() + camelCase.slice(1) }
对于一个 Vue 新手，经常对以下示例代码不能正常运行感到非常疑惑：
Vue.component('MyComponent', { template: '<div>hello, world</div>' }) new Vue({ el: '#app', template: '<MyComponent></MyComponent>' })
如果我们按照模板解析的过程推理，就很好解释了。模板 <MyComponent></MyComponent> 插入到 DOM 后会变成 <mycomponent></mycomponent>。标签 mycomponent 匹配的组件依次为 mycomponent（原标签名）、mycomponent（camelCase形式）、Mycomponent（PascalCase形式），并没有匹配到注册的组件名 MyComponent，所以会报找不到组件 <mycomponent> 的警告。
命名限制