區別：1、元件註冊透過「Vue.component」或「components」屬性，而外掛程式透過「Vue.use()」；2、元件是用來構成App的業務模組，它的目標是“App.vue”，而插件是用來增強技術堆疊的功能模組，它的目標是Vue本身。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
回顧先前對元件的定義：
元件就是把圖形、非圖形的各種邏輯都抽象化為一個統一的概念（元件）來實現開發的模式，在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('componentA',{
template: '#testComponent'
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', { /* ... */ })局部註冊只需在用到的地方透過components屬性註冊一個元件
const component1 = {...} // 定义一个组件export default {
components:{
component1 // 局部注册
}}外掛程式註冊
外掛程式的註冊透過Vue.use()的方式註冊（安裝），第一個參數為外掛程式的名字，第二個參數是可選擇的配置項目
Vue.use(插件名字,{ /* ... */} )注意的是：
註冊插件的時候，需要在呼叫new Vue() 啟動應用之前完成
Vue.use會自動阻止多次註冊相同插件，只會註冊一次
(Component) 是用來構成你的App 的業務模組，它的目標是App.vue
(Plugin) 是用來增強你的技術堆疊的功能模組，它的目標是Vue 本身
Vue的功能的增強或補充
vue.js教學》】
以上是vue中插件和元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
