封裝vue2和vue3都能使用的插件

前言

vue3的已經正式發佈了,從官方文檔來看,部分api和功能有較大的改動,恰好,最近想寫個vue3的插件,轉念一想那我能不能同時也支持vue2呢?就引出了這個問題,咱們能使插件支持vue3的同時也能支持vue2麼?vue

通用代碼

最簡單的方式就是寫vue2和vue3都能運行的代碼(指vue2與vue3都支持的api),就像人們爲python2和python3那樣處理。編寫這樣的插件要求咱們避免使用在vue3中新引入的內容和vue2中不推薦的內容。換句話說,咱們不能使用如下功能:python

  • Composition API 組合式api
  • .sync 修飾符
  • .native 修飾符
  • Filters 過濾器
  • .sync → v-model:
  • ...

可是這種方式,讓咱們摒棄了新式先進的api(composition api ... ),也增長了封裝組件時的心智負擔,你須要時刻注意這些須要避免的api。react

分支管理

爲了解決這個問題,vue核心團隊有人提出了使用不一樣的分支管理不一樣的版本插件。我認爲這種對於已經存在vue2穩定版本的插件來講是一個很好的解決方案。由於存在代碼隔離管理,因此針對不一樣的版本,能夠作不一樣的優化。git

這樣作的缺點也是明顯的,若是咱們須要支持一個新的功能或修改一個bug,那麼咱們就需改兩份代碼,付出兩倍的時間。對於一個新的組件庫,我是不支持這種作法的。github

構建腳本

這種方式其實就是經過寫一套代碼,可是咱們經過構建不一樣的vue版本的腳本,打包發佈爲不一樣版本的插件。這裏介紹一個開源插件庫,就是經過該方案支持不一樣vue版本的。npm

VueUseapi

這種方式有個問題就是每次發佈版本都得構建兩次,並在說明文檔上引導用戶安裝對應的版本(vue還須要手動先安裝@vue/composition-api庫)。工具

介紹Vue Demi

Vue Demi 是一個開發工具庫,咱們在安裝該插件以後,只須要寫一套通用的代碼就能兼容vue2和vue3。
當你想要去開發一個vue的插件庫時,只要將vue-demi做爲一個開發庫依賴,而後你就能夠正常寫vue代碼,發佈你的vue包,你的vue包就自動支持不一樣的版本。post

{
 "dependencies": {
 "vue-demi": "latest"
 }
}
import Vue, { ref, reactive } from 'vue-demi'

該插件的原理是這樣的,它編寫了postinstall腳本(這實際上是個npm 鉤子),在全部的包都安裝完以後,該鉤子執行腳本會去檢查本地已經安裝的vue版本,併爲不一樣的版本,重定向導出不一樣的插件版本。若是本地的vue版本爲2.0時,會去自動安裝@vue/composition-api,若是是3.0則不會安裝。開發工具

這裏有個測試的例子,採用vue-demi封裝了一個插件,並用不一樣的vue版本項目安裝它。

測試例子

相關文章
相關標籤/搜索