當執行時，發生了什麼？

導讀	Vue 提供了一種外掛機制，可以給 Vue 擴充一些屬性，其實這個外掛比較"可笑"，什麼也沒做。

在使用 ElementUI 元件的時候，通常我們會這麼寫：

import ElementUI from 'element-ui'; 
Vue.use(ElementUI);

這樣寫完後，在我們自定義的元件中既可以直接使用：

<template> 
    <div>我是素燕</div> 
</template>

透過本文我們來分析下它是如何實現的。

Vue 提供了一種外掛機制，可以給 Vue 擴充一些屬性，其實這個外掛比較"可笑"，什麼也沒做，不信看下原始碼：

Vue 內部只是幫你判斷了下有沒有重複註冊，並呼叫了你傳給它的函式，其實我自已也可以呼叫，反而饒了一圈，可能框架設計有自己的考慮吧。

按官方的說法，外掛可以是一個函式或者是包含install函式的物件。Element-ui 可以一次性把所有的元件引入，也可以引入其中某一個，它內部其實使用的就是外掛機制。我們動手自己實現一下：

目錄結構如下：

SyElement/index.js：

定義了一個外掛，該外掛中透過 Vue 提供的全域性函式 component 在全域性註冊了元件 SyInfo 和 SyMessage，看程式碼：

import SyInfo from './SyInfo/index'; 
import SyMessage from './SyMessage/index'; 
import log from './log'; 
 
export default { 
    install(Vue, options) { 
        // 全域性註冊元件 SyInfo 
        Vue.component(SyInfo.name, SyInfo); 
        // 全域性註冊元件 SyMessage 
        Vue.component(SyMessage.name, SyMessage); 
 
        // 給 Vue 新增一個全域性函式，該函式可在所有的元件中使用 
        Vue.prototype.$loglog = log; 
    } 
}

由於要支援單元件使用，故每個元件其實也是一個外掛。

import SyMessage from './src/component.vue'; 
// 提供一個 install 函式 
SyMessage.install = function(Vue) { 
    Vue.component(SyMessage.name, SyMessage); 
} 
 
export default SyMessage;

component.vue 就是一個元件的具體實現：

<template> 
    <div class="sy-info"> 
        剖析element-ui的實現方式 
    </div> 
</template> 
 
<script> 
export default { 
    name: 'SyMessage' 
} 
</script>

SyMessage 和 SyInfo 的實現一樣。到此便可以和 Element-ui 一樣的方式使用了：

import ElementUI from 'element-ui'; 
Vue.use(ElementUI);

<template> 
 
    <div> 
        <sy-info></sy-info> 
        <sy-message></sy-message> 
    </div> 
</template>

多說一句：有時候，有些業務需求需要在每個元件中使用某個服務，比如資料統計，其實可以在 Vue 全域性中掛載一個函式，這樣在每個元件中即可使用，比如文章提到的 log 就是在全域性掛載的一個函式：

Vue.prototype.$loglog = log;

在所有的元件中既可以這樣使用：

this.$log({ 
    uid: 'suyan' 
});