1. 介紹

        版本：2.5.17。 

       我們使用vue-vli建立基於Runtime+Compiler的vue腳手架。

       學習文件：https://ustbhuangyi.github.io/vue-analysis/components/

2. 元件化介紹

Vue.js 另一個核心思想是元件化。所謂元件化，就是把頁面拆分成多個元件 (component)，每個元件依賴的 CSS、JavaScript、模板、圖片等資源放在一起開發和維護。元件是資源獨立的，元件在系統內部可複用，元件和元件之間可以巢狀。

我們在用 Vue.js 開發實際專案的時候，就是像搭積木一樣，編寫一堆元件拼裝生成頁面。在 Vue.js 的官網中，也是花了大篇幅來介紹什麼是元件，如何編寫元件以及元件擁有的屬性和特性。

那麼在這一章節，我們將從原始碼的角度來分析 Vue 的元件內部是如何工作的，只有瞭解了內部的工作原理，才能讓我們使用它的時候更加得心應手。

接下來我們會用 Vue-cli 初始化的程式碼為例，來分析一下 Vue 元件初始化的一個過程

import Vue from 'vue'
import App from './App.vue'

var app = new Vue({
  el: '#app',
  // 這裡的 h 是 createElement 方法
  render: h => h(App)
})
 

 它和我們上一章相同的點也是通過 render 函式去渲染的，不同的這次通過 createElement 傳的引數是一個元件而不是一個原生的標籤，那麼接下來我們就開始分析這一過程。