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

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

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

背景

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

定義

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

分類

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

業(yè)務(wù)組件：具有復(fù)用性，比如底部導(dǎo)航欄組件、地區(qū)選址組件、輪播圖組件等?？梢猿槌鰜矸旁谌纸M件。

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

優(yōu)勢

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

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

首屏加載優(yōu)化

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

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

總體上可以分為兩大類：

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

常見使用場景可以分為三類:

父子組件通信:

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

兄弟組件通信:

eventBus ;  vuex

跨級通信:

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

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

總結(jié)

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

最新評論