構(gòu)建Vue.js組件的10個(gè)技巧
1.?組件可以在全局或本地加載
Vue.js提供了兩種加載組件的方法：一種在Vue實(shí)例全局，另一種在組件級(jí)別。兩種方法都有其自身的優(yōu)點(diǎn)。
全局加載組件使其可以從應(yīng)用程序中的任何模板（包括子組件）訪(fǎng)問(wèn)。它減少了將全局組件導(dǎo)入子組件的次數(shù)。
此外，如果全局加載組件，將無(wú)法獲得Vue注冊(cè)組件錯(cuò)誤--“did you register the component correctly?”。注意，謹(jǐn)慎加載全局組件。它會(huì)使您的應(yīng)用程序膨脹，即使它未被使用，它仍將包含在Webpack構(gòu)建的初始bundle中。
在本地加載組件使您能夠隔離組件并僅在必要時(shí)加載它們。與Webpack結(jié)合使用時(shí)，只有在使用組件時(shí)才去延遲加載組件。這使您的初始應(yīng)用程序文件大小更小，并減少了初始加載時(shí)間。
使用Webpack的動(dòng)態(tài)導(dǎo)入延遲加載組件。Vue支持在渲染時(shí)和代碼拆分時(shí)延遲加載組件。這些優(yōu)化允許您的組件代碼僅在需要時(shí)加載，從而減少您的HTTP請(qǐng)求，文件大小，并自動(dòng)為您提供性能提升。關(guān)于此功能的重要部分是它適用于全局加載和本地加載的組件。
全局加載異步組件：
本地加載異步組件：
有很多方法可以為組件創(chuàng)建props。您可以傳遞表示prop名稱(chēng)的字符串?dāng)?shù)組，也可以傳入一個(gè)帶有鍵作為prop名稱(chēng)和配置對(duì)象的對(duì)象。
使用基于對(duì)象的方法允許您為單個(gè) prop 修改一些配置，比如設(shè)置是否?required。required 的值是true 或 false。如果在使用組件時(shí)未設(shè)置prop，true將拋出錯(cuò)誤，false（默認(rèn)值）表示不是必須的，不拋出錯(cuò)誤。
在共享組件給他人或自己使用時(shí)，準(zhǔn)確使用 required 配置是很好的，表明這個(gè)prop很重要。
子組件和父組件之間的通信可以通過(guò)使用組件內(nèi)置函數(shù) $emit 發(fā)出自定義事件來(lái)完成。
$ emit函數(shù)接收 事件名稱(chēng)的字符串 和 可選的值兩個(gè)參數(shù)。要監(jiān)聽(tīng)事件，只需將“@eventName”添加到發(fā)出事件的組件中（即子組件使用的地方），然后傳入事件處理方法。這是保持單一數(shù)據(jù)流，并使數(shù)據(jù)從子組件流向父組件的好方法。
說(shuō)起來(lái)容易做起來(lái)難，如何根據(jù)一個(gè)邏輯來(lái)劃分一個(gè)組件？
分解組件的第一種方法是基于數(shù)據(jù)變化。如果數(shù)據(jù)在組件的一個(gè)部分中不斷變化，而在其他部分中不變，那么變化的組件那部分應(yīng)該單獨(dú)抽取出來(lái)作為獨(dú)立組件。
原因是如果您的數(shù)據(jù)/HTML在模板的一個(gè)部分中不斷變化，則需要檢查和更新整個(gè)組件。但是，如果將變化的HTML放入其自己的組件中，并使用props傳入數(shù)據(jù)，則只有該組件在其props更改時(shí)才會(huì)更新。
從邏輯上分解組件的另一種方法是可重用性。如果您擁有在整個(gè)應(yīng)用程序中重復(fù)使用的HTML，圖形或功能，如按鈕，復(fù)選框，徽標(biāo)動(dòng)畫(huà)，號(hào)召性用語(yǔ)或具有簡(jiǎn)單更改文本的圖形 - 這將是一個(gè)很好的候選，抽取到一個(gè)新的組件，可以被重用。可重用組件具有易于維護(hù)的隱藏優(yōu)勢(shì)，因?yàn)槟恍枰囊粋€(gè)組件，而不必在代碼庫(kù)中找到替換和更改多個(gè)地方。
6. 驗(yàn)證您的props不使用字符串?dāng)?shù)組來(lái)定義props，而是使用允許配置每個(gè)prop的對(duì)象。兩種非常有用的配置項(xiàng)目是“類(lèi)型”和驗(yàn)證器。
使用類(lèi)型參數(shù)，Vue將自動(dòng)鍵入檢查您的prop值。例如，如果我們期望一個(gè)Number prop但收到一個(gè)String，你會(huì)在控制臺(tái)中收到類(lèi)似這樣的警告：
[Vue warn]: Invalid prop: type check failed for prop “count”. Expected Number
對(duì)于更復(fù)雜的驗(yàn)證，我們可以將函數(shù)傳遞給validator屬性，該屬性接收 prop值 作為參數(shù)并返回true或false。這非常強(qiáng)大，因?yàn)樗试S我們針對(duì)傳遞給該特定屬性的值編寫(xiě)自定義驗(yàn)證。
如果你的組件有多個(gè)props，比如說(shuō)5，6，7或更多，那么連續(xù)設(shè)置每個(gè)prop的綁定可能會(huì)變得很繁瑣。幸運(yùn)的是，有一種快速方法可以為組件上的所有屬性設(shè)置綁定，這就是通過(guò)使用v-bind綁定對(duì)象而不是單個(gè)屬性。
使用對(duì)象綁定的另一個(gè)好處是可以覆蓋對(duì)象的任何綁定。
在我們的例子中，如果我們?cè)?person 對(duì)象中將 isActive 設(shè)置為false，那么我們可以對(duì)實(shí)際person 組件執(zhí)行另一個(gè)綁定，并將 isActive 設(shè)置為true而不覆蓋原始對(duì)象。
在某些情況下，您可能希望修改從prop傳入的值。但是，這樣做會(huì)給你一個(gè)警告“Avoid mutating a prop directly”，不讓直接修改屬性。而是使用prop值作為本地?cái)?shù)據(jù)屬性的默認(rèn)值。這樣做將使您能夠查看原始值，但修改本地?cái)?shù)據(jù)不會(huì)更改prop值。
有一個(gè)好處。使用此方法，您的本地?cái)?shù)據(jù)屬性不會(huì)對(duì)prop值產(chǎn)生影響，因此對(duì)父組件的prop值的任何更改都不會(huì)更新您的本地值。但是，如果您確實(shí)需要這些更新，則可以使用計(jì)算屬性組合值。
在Vue測(cè)試工具中有兩種方法可以創(chuàng)建和啟動(dòng)組件。一個(gè)是mount，另一個(gè)是shallow mount。兩者都有自己的優(yōu)點(diǎn)和缺點(diǎn)。
當(dāng)您想要在組件及其子組件之間進(jìn)行相互依賴(lài)的測(cè)試時(shí)，mout技術(shù)非常有效。允許您測(cè)試父組件是否按預(yù)期正確地與其子組件交互。相反，正如其名稱(chēng)所暗示的那樣，shallow mount技術(shù)實(shí)例化并僅渲染父組件，而完全隔離而忽略其任何子組件。也就是說(shuō)，mount會(huì)渲染所有父子組件，shallow mount僅僅渲染父組件。因?yàn)橛袝r(shí)候只需要測(cè)試父組件的一些特性。
那么哪種方法更好？隨你（由你決定。您選擇的策略應(yīng)取決于您可衡量的目標(biāo)。試圖通過(guò)完全隔離來(lái)自行測(cè)試組件，shallow mount方法效果很好。需要處理具有要確保通信的子組件的組件，那就使用mount。一個(gè)很好的選擇是同時(shí)使用它們。不局限于一個(gè)混合搭配，以滿(mǎn)足您的測(cè)試需求。
10. Vue-CLI的力量Vue CLI 是一個(gè)功能強(qiáng)大的命令行界面，允許開(kāi)發(fā)人員快速利用大量可以加快工作流程的功能。
一個(gè)我使用很多的功能是，運(yùn)行?vue serve，后邊跟上一個(gè)Vue組件的路徑。這樣做的好處在于，您可以完全開(kāi)發(fā)一個(gè)獨(dú)立的組件，同時(shí)也可以對(duì)組件進(jìn)行熱重新加載和迭代，無(wú)需臨時(shí)將新組件導(dǎo)入頁(yè)面進(jìn)行開(kāi)發(fā)。
在團(tuán)隊(duì)工作時(shí)，您可能需要提取一個(gè)特定組件并與其他組人共享。這就引出了 Vue CLI 的下一個(gè)功能：將Vue組件導(dǎo)出為庫(kù)的能力。調(diào)用時(shí)，Vue將自動(dòng)構(gòu)建單個(gè)文件組件，將CSS移動(dòng)到外部CSS文件（可選，您也可以?xún)?nèi)聯(lián)），以及創(chuàng)建 UMD 和 Common .js文件以導(dǎo)入到其他JS項(xiàng)目中。
推薦閱讀
我的公眾號(hào)能帶來(lái)什么價(jià)值？(文末有送書(shū)規(guī)則，一定要看)
每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)(長(zhǎng)文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？