組件化定義、優(yōu)點(diǎn)、使用場(chǎng)景和注意事項(xiàng)等方面展開(kāi)陳述打厘，同時(shí)要強(qiáng)調(diào)vue中組件化的一些特點(diǎn)魂爪。
- 源碼分析1:組件定義
// 組件定義
Vue.component('comp', {
template: '<div>this is a component</div>'
})
組件定義，src\core\global-api\assets.js
<template>
<div>
this is a component
</div>
</template>
vue-loader會(huì)編譯template為render函數(shù)捺球，最終導(dǎo)出的依然是組件配置對(duì)象
源碼分析2:組件化優(yōu)點(diǎn)
lifecycle.js - mountComponent()
組件、Watcher夕冲、渲染函數(shù)和更新函數(shù)之間的關(guān)系源碼分析3:組件化實(shí)現(xiàn)
構(gòu)造函數(shù)氮兵，src\core\global-api\extend.js
實(shí)例化及掛載泣栈，src\core\vdom\patch.js - createElm()
總結(jié)
- 組件是獨(dú)立和可復(fù)用的代碼組織單元南片。組件系統(tǒng)是 Vue 核心特性之一伞广，它使開(kāi)發(fā)者使用小型灾票、獨(dú)立和通晨裕可復(fù)用的組件構(gòu)建大型應(yīng)用;
- 組件化開(kāi)發(fā)能大幅提高應(yīng)用開(kāi)發(fā)效率既们、測(cè)試性、復(fù)用性等;
- 組件使用按分類(lèi)有 :頁(yè)面組件、業(yè)務(wù)組件斯棒、通用組件;
- vue的組件是基于配置的，我們通常編寫(xiě)的組件是組件配置而非組件主经，框架后續(xù)會(huì)生成其構(gòu)造函數(shù)荣暮，它們基于VueComponent，擴(kuò)展于Vue;
- vue中常見(jiàn)組件化技術(shù)有: 屬性prop罩驻，自定義事件穗酥，插槽等，它們主要用于組件通信惠遏、擴(kuò)展等;
- 合理的劃分組件砾跃，有助于提升應(yīng)用性能;
- 組件應(yīng)該是高內(nèi)聚、低耦合的;
- 遵循單向數(shù)據(jù)流的原則节吮。
