圖片來源：Vue.js

元件化就是把頁面拆成一個ㄧ個元件( component )，然後像積木ㄧ樣把頁面組合起來，例如可能有導航列、側邊欄、table 等 component。

• component 只要維護自己依賴的 css、js 等資源就好

• component 是可重複用的 Vue 實例，從創建到銷毀會經過一系列的 lifecycle hooks

• component 有自己的 data、computed、watch、methods 等

• component 需註冊(全域註冊或本地註冊)才能使用，需指定名稱

• 每次使用 component 都會創建該元件的新實例，例如點擊按鈕元件時，每個按鈕是獨立計算 count

  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">點擊次數：{{ count }} 次</button>'
  })
  

  <div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
  

  

以 Vue-cli3 初始化的進入點來說，前幾篇提到 Vue 實例是通過 render 方法渲染成真正的 DOM，但此處丟入 createElement 方法的參數是一個 component，不是一個原生 html tag。下一篇從 createComponent 來看 Vue 是如何運作 component 的createComponent

// min.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  
  // h 是 createElement 方法
  render: h => h(App)
}).$mount("#app");