組件化和模組化的區別：模組化是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，確保每個每個功能模組的職能一致。元件化是從UI介面的角度來規劃；前端的元件化，方便UI元件的重複使用。
本教學操作環境：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核心特性之一，它使開發者使用小型、獨立且通常可重複使用的元件來建立大型應用；【相關推薦：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:'<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屬性指向的模板內容，必須有且只能有唯一的一個根元素。
在工作專案開發中第三種方法最好用
【相關推薦：vuejs影片教學】
以上是vue中組件化和模組化有什麼區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
