原文：聊聊 Vue 組件命名那些事
組件注冊(cè)
我們以一個(gè)最簡(jiǎn)單的例子來(lái)研究 Vue 組件的注冊(cè)過(guò)程：
Vue.component('MyComponent', {
template: '<div>hello, world</div>'
})
通過(guò)跟蹤代碼的執(zhí)行過(guò)程州胳，發(fā)現(xiàn)對(duì)組件的名稱有兩處檢查撕彤。
- 檢查名稱是否與 HTML 元素或者 Vue 保留標(biāo)簽重名，不區(qū)分大小寫(xiě)列肢。可以發(fā)現(xiàn)踪少，只檢查了常用的 HTML 元素挣惰，還有很多元素沒(méi)有檢查卧斟，例如
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;
- 檢查組件名稱是否以字母開(kāi)頭谅猾，后面跟字母昆汹、數(shù)值或下劃線
if (!/^[a-zA-Z][\w-]*$/.test(name)) {
warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.');
}
基于以上兩點(diǎn)，可以總結(jié)出組件的命名規(guī)則為：組件名以字母開(kāi)頭锉罐，后面跟字母能耻、數(shù)值或下劃線赏枚，并且不與 HTML 元素或 Vue 保留標(biāo)簽重名。
然而我們注意到晓猛，在上面的檢查中饿幅，不符合規(guī)則的組件名稱是 warn 而不是 error，意味著檢查并不是強(qiáng)制的戒职。實(shí)際上栗恩，Vue 組件注冊(cè)的名稱是沒(méi)有限制的。你可以用任何 JavaScript 能夠表示的字符串洪燥，不管是數(shù)字磕秤、特殊符號(hào)、甚至漢字捧韵，都可以成功注冊(cè)市咆。
模板解析
雖然 Vue 組件沒(méi)有命名限制，但是我們終究是要在模板中引用的再来，不合理的組件名可能會(huì)導(dǎo)致我們無(wú)法引用它蒙兰。
為了弄清楚 Vue 是如何將模板中的標(biāo)簽對(duì)應(yīng)到自定義組件的，我們以一段簡(jiǎn)單的代碼說(shuō)明：
new Vue({
el: '#app',
template: '<my-component></my-component>'
})
總體來(lái)說(shuō)，模板解析分為兩個(gè)過(guò)程：
首先搜变，Vue 會(huì)將 template 中的內(nèi)容插到 DOM 中采缚，以方便解析標(biāo)簽。由于 HTML 標(biāo)簽不區(qū)分大小寫(xiě)痹雅，所以在生成的標(biāo)簽名都會(huì)轉(zhuǎn)換為小寫(xiě)仰担。例如，當(dāng)你的 template 為 <MyComponent></MyComponent> 時(shí)绩社，插入 DOM 后會(huì)被轉(zhuǎn)換為 <mycomponent></mycomponent>摔蓝。
然后，通過(guò)標(biāo)簽名尋找對(duì)應(yīng)的自定義組件愉耙。匹配的優(yōu)先順序從高到低為：原標(biāo)簽名贮尉、camelCase化的標(biāo)簽名、PascalCase化的標(biāo)簽名朴沿。例如 <my-component>會(huì)依次匹配 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)
}
對(duì)于一個(gè) Vue 新手魏铅，經(jīng)常對(duì)以下示例代碼不能正常運(yùn)行感到非常疑惑：
Vue.component('MyComponent', {
template: '<div>hello, world</div>'
})
new Vue({
el: '#app',
template: '<MyComponent></MyComponent>'
})
如果我們按照模板解析的過(guò)程推理，就很好解釋了坚芜。模板 <MyComponent></MyComponent> 插入到 DOM 后會(huì)變成<mycomponent></mycomponent>览芳。標(biāo)簽 mycomponent 匹配的組件依次為 mycomponent（原標(biāo)簽名）、mycomponent（camelCase形式）鸿竖、Mycomponent（PascalCase形式）沧竟，并沒(méi)有匹配到注冊(cè)的組件名 MyComponent，所以會(huì)報(bào)找不到組件 <mycomponent> 的警告缚忧。
命名限制
通過(guò)分析組件注冊(cè)和模板解析的過(guò)程悟泵，發(fā)現(xiàn) Vue 組件命名限制并沒(méi)有我們想象得多。大家可以嘗試一下各種命名闪水，我試過(guò) <a_=-*%按鈕></a_=-*%按鈕> 都可正常運(yùn)行糕非。
但是，并不意味著完全沒(méi)有限制球榆。由于在模板需要插入到 DOM 中朽肥，所以模板中的標(biāo)簽名必須能夠被 DOM 正確地解析。主要有三種情況：一是完全不合法的標(biāo)簽名芜果，例如 </>鞠呈；二是與 HTML 元素重名會(huì)產(chǎn)生不確定的行為，例如使用 input 做組件名不會(huì)解析到自定義組件右钾，使用 button 在 Chrome 上正常但在 IE 上不正常蚁吝；三是與 Vue 保留的 slot旱爆、partial、component 重名窘茁，因?yàn)闀?huì)優(yōu)先以本身的意義解析怀伦，從而產(chǎn)生非預(yù)期的結(jié)果。
上述命名限制存在的根本原因山林，在于模板解析的過(guò)程依賴了 DOM房待。能不能對(duì)模板解析過(guò)程改進(jìn)一下，使其不依賴于 DOM 呢驼抹？實(shí)際上桑孩，這正是 Vue 2.0 的主要改進(jìn)，將模板解析過(guò)程使用 Virtual DOM 實(shí)現(xiàn)框冀，使得組件命名更加靈活流椒。
Vue 2.0 組件命名機(jī)制
組件注冊(cè)
Vue 2.0 的組件注冊(cè)過(guò)程與 Vue 1.0 基本相同，只是 HTML 標(biāo)簽和 Vue 保留標(biāo)簽范圍有些不同：
// 區(qū)分大小寫(xiě)
var isHTMLTag = makeMap(
'html,body,base,head,link,meta,style,title,' +
'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
'div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,' +
'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
'embed,object,param,source,canvas,script,noscript,del,ins,' +
'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
'output,progress,select,textarea,' +
'details,dialog,menu,menuitem,summary,' +
'content,element,shadow,template'
);
// 不區(qū)分大小寫(xiě)
var isSVG = makeMap(
'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,' +
'font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
true
);
var isReservedTag = function (tag) {
return isHTMLTag(tag) || isSVG(tag)
};
// 區(qū)分大小寫(xiě)
var isBuiltInTag = makeMap('slot,component', true);
雖然 HTML 元素重名警告的標(biāo)簽數(shù)大大增加了明也，但重要的是重名區(qū)分大小寫(xiě)宣虾，所以我們可以愉快 地使用 Input、Select温数、Option 等而不用擔(dān)心重名绣硝。這個(gè)功勞屬于 Vue 2.0 引入的 Virtual DOM。
模板解析
前面提到撑刺，Vue 2.0 相對(duì)于 1.0 的最大改進(jìn)就是引入了 Virtual DOM鹉胖，使模板的解析不依賴于 DOM。
使用 Virtual DOM 解析模板時(shí)猜煮，不必像 DOM 方式那樣將模板中的標(biāo)簽名轉(zhuǎn)成小寫(xiě)次员，而是原汁原味地保留原始標(biāo)簽名败许。然后王带，使用原始的標(biāo)簽名進(jìn)行匹配組件。例如市殷，<MyComponent></MyComponent> 不會(huì)轉(zhuǎn)為為小寫(xiě)形式愕撰，直接以 MyComponent 為基礎(chǔ)開(kāi)始匹配。當(dāng)然醋寝，匹配的規(guī)則與 1.0 是一樣的搞挣，即依次匹配：原標(biāo)簽名、camelCase化的標(biāo)簽名音羞、PascalCase化的標(biāo)簽名囱桨。
之前在 1.0 不能正常運(yùn)行的示例代碼，在 2.0 中可以正常運(yùn)行了：
Vue.component('MyComponent', {
template: '<div>hello, world</div>'
})
new Vue({
el: '#app',
template: '<MyComponent></MyComponent>'
})
在 Vue 1.0 和 2.0 中還有一種定義組件模板的方式嗅绰，即使用 DOM 元素舍肠。在這種情況下搀继，解析模板時(shí)仍然會(huì)將標(biāo)簽轉(zhuǎn)為小寫(xiě)形式。所以下面的代碼翠语，在 1.0 和 2.0 均不能正常運(yùn)行叽躯。
// index.html
<div id="app">
<MyComponent></MyComponent>
</div>
// main.js
Vue.component('MyComponent', {
template: '<div>hello, world</div>'
})
new Vue({
el: '#app'
})
命名限制
Vue 2.0 中組件的命名限制與 1.0 的最大區(qū)別在于區(qū)分了大小寫(xiě)〖±ǎ總結(jié)一下就是：一是不使用非法的標(biāo)簽字符点骑；二是不與 HTML 元素（區(qū)分大小寫(xiě)）或 SVG 元素（不區(qū)分大小寫(xiě)）重名；三是不使用 Vue 保留的 slot 和 component（區(qū)分大小寫(xiě)）谍夭。
除了以上三條黑滴，由于 Vue 2.0 內(nèi)置了 KeepAlive、Transition紧索、TransitionGroup 三個(gè)組件跷跪，所以盡量避免與這三個(gè)組件重名。但從另一方面講齐板，你也可以故意重名來(lái)實(shí)現(xiàn)一些特殊的功能吵瞻。例如，keep-alive 的匹配順序?yàn)?keep-alive甘磨、keepAlive橡羞、KeepAlive，所以我們可以注冊(cè)一個(gè) keep-alive 組件來(lái)攔截 KeepAlive 匹配济舆。
