說起組件化，我畢設(shè)寫的就是和組件化相關(guān)的。

當(dāng)時(shí)還拿了優(yōu)，運(yùn)氣！

話不多說，直接進(jìn)入正文。對(duì)于組件化，可以從背景，定義，分類，優(yōu)勢(shì)，首屏加載優(yōu)化，組件之間的關(guān)系等方面扯扯，哦不對(duì)，是闡述。

背景

假設(shè)說采取傳統(tǒng)開發(fā)網(wǎng)頁的方式去開發(fā)一個(gè)系統(tǒng)，在一定程度上，會(huì)造成資源上的嚴(yán)重浪費(fèi)，編程代碼上的冗余等弊端缺陷，會(huì)給開發(fā)者在增加功能上、版本迭代上、處理業(yè)務(wù)變更上帶來很大的不便。為了避免這些弊端可以采取組件化設(shè)計(jì)去開發(fā)一個(gè)多人協(xié)作、功能又較多的項(xiàng)目，組件化開發(fā)帶來的可維護(hù)性和可復(fù)用性可以提升開發(fā)效率、降低代碼耦合度。

定義

• 組件是可復(fù)用的 Vue 實(shí)例，與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。
• 組件的本質(zhì)是產(chǎn)生虛擬DOM。
• vue組件系統(tǒng)提供了一種抽象，讓我們可以使用獨(dú)立可復(fù)用的組件來構(gòu)建大型應(yīng)用，任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹。

分類

通用組件：具有通用性、復(fù)用性，比如輸入框組件、按鈕組件、單選框/復(fù)選框組件等基礎(chǔ)的通用組件。

業(yè)務(wù)組件：具有復(fù)用性，比如底部導(dǎo)航欄組件、地區(qū)選址組件、輪播圖組件等。可以抽出來放在全局組件。

頁面組件：一個(gè)頁面屬于一個(gè)組件，同時(shí)它也可以由許多組件構(gòu)成，如下所示，組件只需要引入-注冊(cè)-使用即可，例如列表頁組件、詳情頁組件、個(gè)人頁面組件等

優(yōu)勢(shì)

• 組件化可以增加代碼的復(fù)用性、可維護(hù)性和可測(cè)試性。
• 組件化能提高開發(fā)效率，方便重復(fù)使用（復(fù)用），簡(jiǎn)化調(diào)試步驟，提升項(xiàng)目可維護(hù)性，便于多人協(xié)同開發(fā)。

比如說，在項(xiàng)目中，根據(jù)不同的核心點(diǎn)去劃分不同的組件然后放置在各自功能模塊的文件夾里，這使得組件之間互不影響，關(guān)系清晰，有利于后期的開發(fā)和維護(hù)，提升了開發(fā)效率。

首屏加載優(yōu)化

Vue 每個(gè)頁面組件都有對(duì)應(yīng)的路由，路由全部寫在routes.js 文件中，當(dāng)項(xiàng)目組件過多，考慮Vue屬于單頁面應(yīng)用（SPA），雖然JS動(dòng)態(tài)修改內(nèi)容，資源只需要局部刷新，但是剛開始進(jìn)入首頁時(shí)，如果需要加載的組件過多，會(huì)造成長(zhǎng)時(shí)間的白屏，因此路由可以使用懶加載的方式，懶加載是延遲加載甚至是不加載，有利于減輕服務(wù)器壓力。除了懶加載可以解決優(yōu)化首屏加載慢之外，其實(shí)還有很多優(yōu)化方法，如下圖所示：

組件之間的關(guān)系

總體上可以分為兩大類：

• 父子組件之間通信
• 非父子組件之間通信(兄弟組件、隔代關(guān)系組件等)

常見使用場(chǎng)景可以分為三類:

父子組件通信:

props; $parent / $children; provide / inject ; ref ;  $attrs / $listeners

兄弟組件通信:

eventBus ;  vuex

跨級(jí)通信:

eventBus；Vuex；provide / inject 、$attrs / $listeners

組件之間的通信方式有8種，在實(shí)際開發(fā)過程中，最好需要掌握三四種，如下圖所示。

總結(jié)

篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!