vue中元件化和模組化有什麼區別

元件化和模組化的區別：模組化是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個每個功能模組的職能一致。元件化是從UI介面的角度進行規劃；前端的元件化，方便UI元件的重用。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

模組化的由來

在網頁開發的早期，js製作作為一種指令碼語言，做一些簡單的表單驗證或者動畫實現，程式碼量比較少，只要寫在script標籤裡面就可以了

隨著ajax非同步請求的出現，慢慢形成了前後端分離，使用者端需要完成的事情越來越多，程式碼量也越來越多。為了應對程式碼量的劇增，我們通常會把程式碼組織在多個js檔案中，進行維護

但會出現一些問題：比如全域性變數同名的問題

使用函數閉包可以解決變數衝突的問題，但是使用不了其他檔案定義的變數

模組化有兩個核心：匯出和匯入

瞭解下es6模組化開發吧

關鍵字export（匯出） import（匯入）

例如這樣，封裝傳送ajax的一個模組

某些情況下，一個模組中包含某個功能，我們並不希望給這個功能命名，要讓匯入者來自己命名

就可以使用export default

export default address
//只能預設一個

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//匯入 import

為什麼要使用模組化？使用模組化的好處

當然，不使用模組化開發也能實現頁面的所有功能，但是會加重對伺服器請求的壓力和降低使用者的體驗，當頁面需要的資料過多時，一次請求就包含了所有請求的資料，如果使用者不需要呢？這樣的請求還有效果嗎！當然是沒效果的，所以，利用模組化開發的思想就能解決這類問題

簡單談談自己對模組化開發使用的好處

1、條理清晰，便於維護

2、不會一次將所有資料請求回來，使用者體驗感好

3、模組之間相互隔離，但是可以通過特定的介面公開內部成員，也可以依賴別的模組

元件化和模組化對比

很多人將元件化和模組化理解為一個，當然很多地方相似，那下面大家一起看看不相似吧！

1、元件化是獨立和可複用的程式碼組織單元。元件系統是vue核心特性之一，它使開發者使用小型、獨立和通常可複用的元件構建大型應用；【相關推薦：、】

2、元件化開發能大幅度提高應用開發效率、測試性、複用性等；

3、元件使用按分類有：頁面元件、業務元件、通用元件；

4、vue的元件是基於設定的，我們通常編寫的元件是元件設定而非元件，框架後續會生成其建構函式，它們基於VueComponent，擴充套件於Vue；

5、vue中常見元件化技術有屬性prop，自定義事件，插槽等，它們主要用於元件通訊、擴充套件等；

6、合理的劃分元件，有助於提高應用效能；

7、元件應該是高內聚、低耦合的；

8、遵循單向資料流的原則。

元件化和模組化的不同：

模組化：是從程式碼邏輯的角度進行劃分；方便程式碼進行分層開發，保證每個功能模組的職能單一

元件化：是從UI介面的角度進行劃分，前端的元件化，方便UI元件的複用

全域性元件定義的三種方式

第一種

 <div id="app">
        <!-- 如果要使用元件，直接把元件的名稱，以HTML標籤形式，引入到頁面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:'<h3>使用Vue.extend 來建立全域性的Vue元件</h3>'
        })
        //1,使用Vue.component('元件名'，建立出來的元件模板物件)
        Vue.component('mycom1',com1)
 </script>

第二種

<script>
Vue.component('mycom2',{template:'<div><h3>使用Vue.component 建立出來的元件</h3>s<span>template</span></div>'
        })
</script>

第三種

<templat id="temp">
 <div>
   <h1>通過templat元素，在外部定義的元件結構，這個方式，有程式碼的智慧提示和高亮</h1>
   <h4>好用，不錯</h4>
  </div>
</templat>

<script>
 Vue.component('mycom2',{
            template:'temp'
        })
</script>

注意：不論是哪種方式建立出來的元件，元件的template屬性指向的模板內容，必須有且只能有唯一的一個根元素。

在工作專案開發中第三種方法最好用

【相關推薦：】

以上就是vue中元件化和模組化有什麼區別的詳細內容，更多請關注TW511.COM其它相關文章！