淺析Vue中的插件和元件，聊聊它們的差別！

元件是什麼？插件是什麼？以下這篇文章帶大家了解一下Vue中的外掛程式和元件，聊聊外掛程式和元件的差別，希望對大家有幫助！

一、元件是什麼

#回顧先前對元件的定義：

元件就是把圖形、非圖形的各種邏輯均抽象化為一個統一的概念（元件）來實現開發的模式，在Vue中每一個.vue檔案都可以視為一個元件。 （學習影片分享：vue影片教學）

元件的優點

• 降低整個系統的耦合度，在保持介面不變的情況下，我們可以替換不同的元件快速完成需求，例如輸入框，可以替換為日曆、時間、範圍等元件作具體的實作
• 調試方便，由於整個系統是透過元件組合起來的，在出現問題的時候，可以用排除法直接移除組件，或者根據報錯的組件快速定位問題，之所以能夠快速定位，是因為每個組件之間低耦合，職責單一，所以邏輯會比分析整個系統要簡單
• 提高可維護性，由於每個元件的職責單一，且元件在系統中是被重複使用的，所以對程式碼進行最佳化可獲得系統的整體升級

二、外掛程式是什麼

外掛通常用來為 Vue 新增全域功能。外掛程式的功能範圍沒有嚴格的限制－一般有以下幾種：

• 新增全域方法或屬性。如: vue-custom-element
• 新增全域資源：指令/過濾器/過渡等。如 vue-touch
• 透過全域混入來新增一些元件選項。如vue-router
• 新增 Vue 實例方法，透過將它們加入 Vue.prototype 上實現。
• 一個函式庫，提供自己的 API，同時提供上述的一個或多個功能。如vue-router

三、兩者的差異

兩者的差異主要表現在下列幾個方面：

• 寫形式
• 註冊形式
• 使用場景

寫形式

寫元件

寫一個元件，可以有很多方式，我們最常見的就是vue單一檔案的這種格式，每一個.vue檔案我們都可以看成是一個元件

vue檔案標準格式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

我們也可以透過template屬性來寫一個元件，如果元件內容多，我們可以在外部定義template元件內容，如果元件內容不多，我們可直接寫在template#屬性上

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

寫外掛

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', { /* ... */ })

1\

局部註冊只需在用到的地方透過components屬性註冊一個元件

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

外掛程式註冊

外掛程式的註冊透過Vue.use()的方式進行註冊（安裝），第一個參數為外掛程式的名字，第二個參數是可選擇的組態項目

Vue.use(插件名字,{ /* ... */} )

注意的是：

註冊外掛程式的時候，需要在呼叫 #new Vue( ) 啟動應用之前完成

Vue.use會自動阻止多次註冊相同插件，只會註冊一次

##使用場景

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

元件 

(Component) 是用來構成你的 #App 的業務模組，它的目標是 App.vue

外掛程式 

(Plugin) 是用來增強你的技術堆疊的功能模組，它的目標是Vue 本身

簡單來說，外掛程式就是指對

Vue的功能的增強或補充

（學習影片分享：

web前端開發、程式設計基礎影片）

以上是淺析Vue中的插件和元件，聊聊它們的差別！的詳細內容。更多資訊請關注PHP中文網其他相關文章！