區(qū)別:1、組件注冊通過“Vue.component”或“components”屬性,而插件通過“Vue.use()”;2、組件是用來構(gòu)成App的業(yè)務(wù)模塊,它的目標是“App.vue”,而插件是用來增強技術(shù)棧的功能模塊,它的目標是Vue本身。
本教程操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
一、組件是什么
回顧以前對組件的定義:
組件就是把圖形、非圖形的各種邏輯均抽象為一個統(tǒng)一的概念(組件)來實現(xiàn)開發(fā)的模式,在Vue
中每一個.vue
文件都可以視為一個組件
組件的優(yōu)勢
-
降低整個系統(tǒng)的耦合度,在保持接口不變的情況下,我們可以替換不同的組件快速完成需求,例如輸入框,可以替換為日歷、時間、范圍等組件作具體的實現(xiàn)
-
調(diào)試方便,由于整個系統(tǒng)是通過組件組合起來的,在出現(xiàn)問題的時候,可以用排除法直接移除組件,或者根據(jù)報錯的組件快速定位問題,之所以能夠快速定位,是因為每個組件之間低耦合,職責單一,所以邏輯會比分析整個系統(tǒng)要簡單
-
提高可維護性,由于每個組件的職責單一,并且組件在系統(tǒng)中是被復(fù)用的,所以對代碼進行優(yōu)化可獲得系統(tǒng)的整體升級
二、插件是什么
插件通常用來為 Vue
添加全局功能。插件的功能范圍沒有嚴格的限制——一般有下面幾種:
- 添加全局方法或者屬性。如:
vue-custom-element
- 添加全局資源:指令/過濾器/過渡等。如
vue-touch
- 通過全局混入來添加一些組件選項。如
vue-router
- 添加
Vue
實例方法,通過把它們添加到Vue.prototype
上實現(xiàn)。 - 一個庫,提供自己的
API
,同時提供上面提到的一個或多個功能。如vue-router
三、兩者的區(qū)別
兩者的區(qū)別主要表現(xiàn)在以下幾個方面:
- 編寫形式
- 注冊形式
- 使用場景
編寫形式
編寫組件
編寫一個組件,可以有很多方式,我們最常見的就是vue
單文件的這種格式,每一個.vue
文件我們都可以看成是一個組件
vue
文件標準格式
<template> </template> <script> export default{ ... } </script> <style> </style>
我們還可以通過template
屬性來編寫一個組件,如果組件內(nèi)容多,我們可以在外部定義template
組件內(nèi)容,如果組件內(nèi)容并不多,我們可直接寫在template
屬性上
<template id="testComponent"> // 組件顯示的內(nèi)容 <div>component!</div> </template> Vue.component('componentA',{ template: '#testComponent' template: `<div>component</div>` // 組件內(nèi)容少可以通過這種形式 })
編寫插件
vue
插件的實現(xiàn)應(yīng)該暴露一個 install
方法。這個方法的第一個參數(shù)是 Vue
構(gòu)造器,第二個參數(shù)是一個可選的選項對象
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
方法,第一個參數(shù)為組件的名稱,第二個參數(shù)為傳入的配置項
Vue.component('my-component-name', { /* ... */ })
局部注冊只需在用到的地方通過components
屬性注冊一個組件
const component1 = {...} // 定義一個組件export default { components:{ component1 // 局部注冊 }}
插件注冊
插件的注冊通過Vue.use()
的方式進行注冊(安裝),第一個參數(shù)為插件的名字,第二個參數(shù)是可選擇的配置項
Vue.use(插件名字,{ /* ... */} )
注意的是:
注冊插件的時候,需要在調(diào)用 new Vue()
啟動應(yīng)用之前完成
Vue.use
會自動阻止多次注冊相同插件,只會注冊一次
使用場景
具體的其實在插件是什么章節(jié)已經(jīng)表述了,這里在總結(jié)一下
組件 (Component)
是用來構(gòu)成你的 App
的業(yè)務(wù)模塊,它的目標是 App.vue
插件 (Plugin)
是用來增強你的技術(shù)棧的功能模塊,它的目標是 Vue
本身
簡單來說,插件就是指對Vue
的功能的增強或補充
【