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 能夠表示的字符串，不管是數字、特殊符號、甚至漢字，都可以成功注冊。