vue自定義元件 外掛 元件 Vue中元件和外掛有什麼區別？

一、元件是什麼

回顧以前對元件的定義：

元件就是把圖形、非圖形的各種邏輯均抽象為一個統一的概念（元件）來實現開發的模式，在

Vue

中每一個

。vue

檔案都可以視為一個元件

元件的優勢

降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換不同的元件快速完成需求，例如輸入框，可以替換為日曆、時間、範圍等元件作具體的實現

除錯方便，由於整個系統是透過元件組合起來的，在出現問題的時候，可以用排除法直接移除元件，或者根據報錯的元件快速定位問題，之所以能夠快速定位，是因為每個元件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單

提高可維護性，由於每個元件的職責單一，並且元件在系統中是被複用的，所以對程式碼進行最佳化可獲得系統的整體升級

二、外掛是什麼

外掛通常用來為

Vue

新增全域性功能。外掛的功能範圍沒有嚴格的限制——一般有下面幾種：

新增全域性方法或者屬性。如：

vue-custom-element

新增全域性資源：指令/過濾器/過渡等。如

vue-touch

透過全域性混入來新增一些元件選項。如

vue-router

新增

Vue

例項方法，透過把它們新增到

Vue。prototype

上實現。

一個庫，提供自己的

API

，同時提供上面提到的一個或多個功能。如

vue-router

三、兩者的區別

兩者的區別主要表現在以下幾個方面：

編寫形式

註冊形式

使用場景

編寫形式

編寫元件

編寫一個元件，可以有很多方式，我們最常見的就是

vue

單檔案的這種格式，每一個

。vue

檔案我們都可以看成是一個元件

vue

檔案標準格式

我們還可以透過

template

屬性來編寫一個元件，如果元件內容多，我們可以在外部定義

template

元件內容，如果元件內容並不多，我們可直接寫在

template

屬性上

Vue。component（‘componentA’，{ template： ‘#testComponent’ template： `

` // 元件內容少可以透過這種形式}）

#編寫外掛

vue

外掛的實現應該暴露一個

install

方法。這個方法的第一個引數是

Vue

構造器，第二個引數是一個可選的選項物件

MyPlugin。install = function （Vue， options） { // 1。 新增全域性方法或 property Vue。myGlobalMethod = function （） { // 邏輯。。。 } // 2。 新增全域性資源 Vue。directive（‘my-directive’， { bind （el， binding， vnode， oldVnode） { // 邏輯。。。 } 。。。 }） // 3。 注入元件選項 Vue。mixin（{ created： function （） { // 邏輯。。。 } 。。。 }） // 4。 新增例項方法 Vue。prototype。$myMethod = function （methodOptions） { // 邏輯。。。 }}

註冊形式

元件註冊

vue

元件註冊主要分為全域性註冊與區域性註冊

全域性註冊透過

Vue。component

方法，第一個引數為元件的名稱，第二個引數為傳入的配置項

Vue。component（‘my-component-name’， { /* 。。。 */ }）

區域性註冊只需在用到的地方透過

components

屬性註冊一個元件

const component1 = {。。。} // 定義一個元件export default { components：{ component1 // 區域性註冊 }}

外掛註冊

外掛的註冊透過

Vue。use（）

的方式進行註冊（安裝），第一個引數為外掛的名字，第二個引數是可選擇的配置項

Vue。use（外掛名字，{ /* 。。。 */} ）

注意的是：

註冊外掛的時候，需要在呼叫

new Vue（）

啟動應用之前完成

Vue。use

會自動阻止多次註冊相同外掛，只會註冊一次

使用場景

具體的其實在外掛是什麼章節已經表述了，這裡在總結一下

元件

（Component）

是用來構成你的

App

的業務模組，它的目標是

App。vue

外掛

（Plugin）

是用來增強你的技術棧的功能模組，它的目標是

Vue

本身

簡單來說，外掛就是指對

Vue

的功能的增強或補充

Vue 的外掛原理

1。 安裝原理分析

肯定有人好奇，Vue Router 之類的外掛是怎麼搭配 Vue 的，外掛安裝的原理是什麼，本章會對此簡單分析一下，

首先我們知道安裝外掛的入口 API 是 Vue。use 函式，那麼就可以開啟 Vue 的原始碼檔案，看看這個API 的具體實現

我在 node_modules -> vue -> dist -> vue。js 的 Vue。use 原始碼中添加了點註釋如下：

// 引數為外掛物件Vue。use = function （plugin） { // 獲取外掛快取陣列，如果沒有就建立一個空陣列當作外掛快取陣列 var installedPlugins = （this。_installedPlugins || （this。_installedPlugins = ［］））； // 判斷實參的外掛物件是否安裝過，如果安裝過就不再安裝 if （installedPlugins。indexOf（plugin） > -1） { return this } // Vue。use 我們可以這樣呼叫 Vue。use（外掛物件， 引數1， 引數2， 引數n） // toArray 是 Vue 自己封裝的 Api，這個地方的意思是去掉 Vue。use 的第一個引數，既外掛物件 // 然後把其他引數變成一個引數陣列 var args = toArray（arguments， 1）； // 把 Vue 類也放到引數數組裡 args。unshift（this）； // 回撥外掛物件的 install 方法 if （typeof plugin。install === ‘function’） { plugin。install。apply（plugin， args）； } // 將外掛物件存入外掛快取陣列中 installedPlugins。push（plugin）； return this}

再來看看 Vue。use 的大概流程圖：

看完原始碼和流程圖，我們可以發現 Vue 安裝外掛的原理非常簡單，無非就是外掛物件需要有一個回撥方法

install，install 函式的引數列表中會有一個 Vue 類，那麼我們就可以利用這個 Vue 類，向 Vue 中註冊

全域性元件，後面我們建立 Vue 物件後就可以使用這些元件，這樣就完成了外掛與 Vue 的整合

我們可以透過 Vue Router 外掛的 install 函式，看看它都做了什麼來驗證一下我們的觀點，我將 Vue Router

的原始碼做了刪減只留下重要部分，可以清晰的看出和我們的思路是一樣的，就是向 Vue 中新增全域性元件和全域性屬性，

來達到安裝的效果，程式碼如下：

// 原始碼路徑為 node_modules -> vue-router -> dist -> vue-router。jsfunction install （Vue） { // 向 Vue 類的原型物件中新增 $router 屬性 Object。defineProperty（Vue。prototype， ‘$router’， { get： function get （） { return this。_routerRoot。_router } }）； // 向 Vue 類的原型物件中新增 $route 屬性 Object。defineProperty（Vue。prototype， ‘$route’， { get： function get （） { return this。_routerRoot。_route } }）； // 註冊全域性元件 RouterView，可以透過 或 使用 Vue。component（‘RouterView’， View）； // 註冊全域性元件 RouterLink，可以透過 或 使用 Vue。component（‘RouterLink’， Link）；}

2。 自定義外掛

透過前面分析的原理，我們可以自定義一個外掛，然後使用 Vue。use 安裝感受下，要做的事情很簡單，就是在外掛內註冊一個全域性元件，然後使用 Vue。use 安裝後，直接使用該元件

為了簡單，我們就不用腳手架了，直接建立一個 HTML 檔案來實現，程式碼也不復雜用心看看就懂：

<！DOCTYPE html> <！—— 此處自定義一個外掛 ——> <！—— Vue 管理的 div ——>

<！—— 引入 Vue。js ——>

執行效果：

我建了一個【前端學習群】，【免費領取學習資料】或學習的同學可以關注我：

前端學習交流 - 知乎