這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 對vue項目來說，組件是構成項目的基本單元，為了方便理解，這裡定義兩類組件：頁面組件，功能組件。為什麼需要劃分這兩類組件是從組件復用來考慮的。 我們知道在複雜應用中，頁面狀態管理早已不是早期的簡單的子父組件的傳值，兄弟組件傳值。而當我們尋 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
對vue項目來說，組件是構成項目的基本單元，為了方便理解，這裡定義兩類組件：頁面組件，功能組件。
為什麼需要劃分這兩類組件是從組件復用來考慮的。
我們知道在複雜應用中，頁面狀態管理早已不是早期的簡單的子父組件的傳值，兄弟組件傳值。而當我們尋求到vuex這種狀態管理來處理組件間狀態管理的時候，我們同樣也對使用vuex的組件失去了復用的可能。
為什麼失去了復用的可能？ 我們知道是用第三方狀態管理就意味著狀態丟給了第三方，而我們的組件依賴第三方狀態管理的時候，單個組件就不足以僅把組件復用，還必鬚根據該組件對於的狀態進行第三方狀態管理的配置。同時我們可能還要對各種狀態是做什麼的瞭如指掌，這和寫一個該組件的成本沒什麼差別（可能比寫一份該組件的成本更高）。
所以，對於該類使用或者可能使用第三方庫的組件劃分為頁面組件，而剩下的和第三方庫無依賴關係的組件劃分為功能組件。
從而我們可以理解為，頁面組件是無法復用的組件，功能組件是可以復用的組件。
如何定義他們
最先對頁面組件的定義僅僅是整張頁面的統籌，頁面組件也是由一個個功能組件堆疊而成的，比如element-ui這樣的組件庫，他們的組件都可以稱之為功能組件。而我們所寫的頁面，引入了element-ui中的各種組件堆出了一張管理系統的頁面，就是頁面組件。我們通常會在頁面組件中發送數據請求，根據介面返回數據，處理為可用數據，然後將數據分發給不同功能組件。同樣，頁面組件也會接受功能組件返回值，根據返回值做不同的處理（或請求數據，或修改數據）
而對功能組件的定義為，他的展示只受父組件通過props組件傳值過來的數據影響，他的所有狀態均為內部私有，與外部組件的交互有vue提供的props以及事件分發vm.$emit()。因為只有這也組件才能保證其完整的內部狀態，在復用時不受其他因素的影響。
如何劃分他們
劃分頁面組件最簡單的方式是由路由劃分，每一個路由對應一個頁面組件。
功能組件的劃分需要對頁面組件的功能進行分析分類。功能組件的劃分可能根據不同人的理解各不相同，但是原則只有一個：
功能組件應該類似面向對象編程一樣，一個功能組件應該只是完成一個功能。
拿當你看見這篇博文時頁面的佈局來舉個例子：
頁面組件就是當前你看見的這個網頁地址的完整顯示，他將包含幾個功能組件 功能組件可能有以下幾個: 1. 文章組件，可能需要的props的值為：標題，時間，內容 （文章內容顯示） 2. 個人信息組件：可能需要的props的值為：頭像等個人信息 （個人信息顯示） 3. 列表組件：可能需要的props的值為：列表名，列表list （右下角的最新文章，文章存檔，熱門文章等顯示） 4. 評論組件： 可能需要的props的值為：頭像，名稱，時間，內容。 5. 按鈕組件： 頁面中的各種按鈕，比如左邊的點贊分享按鈕，可能需要的props為兩張小圖片，一張正常顯示，一張移入顯示
在談談自己對頁面組件的理解
自己對頁面組件的理解僅僅是各種功能組件的整合，就和我們寫以前項目中使用js調用各種庫一樣，通過這些庫寫出了各種效果。我們可能通過jquery的ajax發送一個請求，請求回來一個分也數據，我們把分頁數據處理，把數據條數傳給了一個分頁插件，然後分頁插件幫我們渲染出了分頁器。我們可能把請求回來的列表內容傳遞給了一個自己封裝的表格渲染插件，表格渲染插件幫我們渲染出了我們想要的表格數據並且顯示在了頁面上面。而頁面組件就擔任這這個js所做的功能，請求數據，分發數據，接受插件的回調，在請求數據，在分發數據
而頁面組件也是一樣，請求處理數據，分發數據給對應組件的props，接受某些組件的vm.$emit()傳回來的值，在請求處理數據，修改組件的props的值進行傳遞
由上面一系列類比，其實組件就好比或者說就是插件，或者面向對象的寫法。思想上面對組件的劃分就和對功能的封裝。組件留的props就是對介面的定義。本質上沒區別的。
本文轉載於:
https://blog.csdn.net/stopllL/article/details/79473357
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
