vue3的已經正式發佈了,從官方文檔來看,部分api和功能有較大的改動,恰好,最近想寫個vue3的插件,轉念一想那我能不能同時也支持vue2呢?就引出了這個問題,咱們能使插件支持vue3的同時也能支持vue2麼?vue
最簡單的方式就是寫vue2和vue3都能運行的代碼(指vue2與vue3都支持的api),就像人們爲python2和python3那樣處理。編寫這樣的插件要求咱們避免使用在vue3中新引入的內容和vue2中不推薦的內容。換句話說,咱們不能使用如下功能:python
可是這種方式,讓咱們摒棄了新式先進的api(composition api ... ),也增長了封裝組件時的心智負擔,你須要時刻注意這些須要避免的api。react
爲了解決這個問題,vue核心團隊有人提出了使用不一樣的分支管理不一樣的版本插件。我認爲這種對於已經存在vue2穩定版本的插件來講是一個很好的解決方案。由於存在代碼隔離管理,因此針對不一樣的版本,能夠作不一樣的優化。git
這樣作的缺點也是明顯的,若是咱們須要支持一個新的功能或修改一個bug,那麼咱們就需改兩份代碼,付出兩倍的時間。對於一個新的組件庫,我是不支持這種作法的。github
這種方式其實就是經過寫一套代碼,可是咱們經過構建不一樣的vue版本的腳本,打包發佈爲不一樣版本的插件。這裏介紹一個開源插件庫,就是經過該方案支持不一樣vue版本的。npm
VueUseapi
這種方式有個問題就是每次發佈版本都得構建兩次,並在說明文檔上引導用戶安裝對應的版本(vue還須要手動先安裝@vue/composition-api
庫)。工具
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版本項目安裝它。