vue 源碼學習之 面試那些事 ----對 vue組件化的理解

源碼分析1： 組件的定義

// 組件定義
Vue.component('comp', {
	templaet: '<div>this is a component</div>'
})

// 組件定義， src/core/global-api/assets.js
<template>
	<div>
	    this is a component
	</div>
</template>

// webpack 的 vue-loader 會編譯 template 爲 render 函數，最終 導出的依然是(.vue --> .js)組件配置對象
// style  ----> style-loader
// css ----> css-loader

源碼分析2: 組件化的優勢

lifecycle.js --  mountComponent()

// 組件、watcher 、渲染函數和更新函數之間的關係

源碼分析3: 組件化的實現

構造函數，   src/core/global-api/extend.js

實例化及掛載，    src/core/vdom/patch.js  --- createElm()

整個過程得出一個 結論： 實例是自上而下， 掛載是自下而上的過程

總結：

1. 組件是什麼？組件化是什麼？ 

   也就是說組件是 獨立和 可複用的代碼組織單元。 組件系統是 vue 核心的特性之一，它是的開發者 使用小型的，獨立的和一般能夠 複用的組件構建 大型的應用

2.  組件開發能大幅度的提升 應用 開發的效率、測試性、複用性等

3.  組件按使用分類 ： 頁面組件， 業務組件， 通用組件

4.  vue 的組件是基於配置的，咱們一般編寫的組件是組件配置而 非 組件， 框架 後續會生成其構造函數， 他們都是 基於 vueComponent, 擴展 於vue

5.  vue中 常見的組件化技術： 屬性 prop,  自定義事件，(擴展組件內的內容)插槽等， 他們主要用於 組件通訊、擴展

6.  合理的劃分組件， 有助於 提高應用性能

7.  組件(獨立的組件單元)應該是 高內聚， 低耦合的

8.  遵循單線數據流 的原則