vue中組件化和模塊化有哪些區別

這篇文章主要介紹“vue中組件化和模塊化有哪些區別”，在日常操作中，相信很多人在vue中組件化和模塊化有哪些區別問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中組件化和模塊化有哪些區別”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

模塊化的由來

在網頁開發的早期，js制作作為一種腳本語言，做一些簡單的表單驗證或者動畫實現，代碼量比較少，只要寫在script標簽里面就可以了

隨著ajax異步請求的出現，慢慢形成了前后端分離，客戶端需要完成的事情越來越多，代碼量也越來越多。為了應對代碼量的劇增，我們通常會把代碼組織在多個js文件中，進行維護

但會出現一些問題：比如全局變量同名的問題

使用函數閉包可以解決變量沖突的問題，但是使用不了其他文件定義的變量

模塊化有兩個核心：導出和導入

了解下es6模塊化開發吧

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

例如這樣，封裝發送ajax的一個模塊

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

就可以使用export default

export default address
//只能默認一個

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

//導入 import

為什么要使用模塊化？使用模塊化的好處

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

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

1、條理清晰，便于維護

2、不會一次將所有數據請求回來，用戶體驗感好

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

組件化和模塊化對比

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

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

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:'<h4>使用Vue.extend 來創建全局的Vue組件</h4>'
        })
        //1,使用Vue.component('組件名'，創建出來的組件模板對象)
        Vue.component('mycom1',com1)
 </script>

第二種

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

第三種

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

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

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

在工作項目開發中第三種方法最好用

到此，關于“vue中組件化和模塊化有哪些區別”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！