Vue中元件和外掛有什麼區別？

林恒發表於2024-02-29
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('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的功能的增強或補充

參考文獻

  • https://vue3js.cn/docs/zh

相關文章