vue2升級vue3：Vue Demij打通vue2與vue3壁壘，構建通用元件
如果你的vue2程式碼之前是使用vue-class-component 類元件模式寫的。選擇可以使用 https://github.com/facing-dev/vue-facing-decorator 來進行低成本的升級，但是升級難度還是蠻大的。
如果你之前的vue2 版本使用的是 @vue/composition-api，那麼 Vue Demi 以後可以無縫升級vue3.
Vue Demi 是一個很棒的包，具有很多潛力和實用性。
根據建立者 Anthony Fu 的說法
Vue Demi 是一個開發實用程式，允許你為 Vue 2 和 3 編寫通用 Vue 庫。而無需擔心使用者安裝的版本。
作者Antfu的介紹部落格： https://antfu.me/posts/make-libraries-working-with-vue-2-and-3
vue-demi庫：https://github.com/vueuse/vue-demi
以前，要建立支援兩個目標版本的 Vue 庫，我們會使用不同的分支來分離對每個版本的支援。對於現有庫來說，這是一個很好的方法，因為它們的程式碼庫通常更穩定。
缺點是，你需要維護兩個程式碼庫，這讓你的工作量翻倍。對於想要支援Vue的兩個目標版本的新Vue庫來說，我不推薦這種方法。實施兩次功能請求和錯誤修復根本就不理想。
這就是 Vue Demi 的用武之地。Vue Demi 通過為兩個目標版本提供通用支援來解決這個問題，這意味著您只需構建一次即可獲得兩個目標版本的所有優點，從而獲得兩全其美的優勢。
-
通用Vue庫。意味著這大多數情況下不是業務開發者會直接使用到的庫，主要面向庫開發者（vue元件庫/vue外掛 等）
-
開發工具。供庫開發者使用的工具，也就是說業務開發者不實際感知到它；
在 Vue 2 中，Composition API 作為外掛提供，在使用它之前需要安裝在 Vue 範例上：
import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI)
Vue Demi 會嘗試自動安裝它，但是對於您想要確保外掛安裝正確的情況，提供了 install() API 來幫助您。
Vue Demi使用了NPM勾點postinstall。當用戶安裝所有包後，指令碼將開始檢查已安裝的Vue版本，並根據Vue版本返回對應的程式碼。在使用Vue 2時，如果沒有安裝@vue/composition-api，它也會自動安裝.
它作為 Vue.use(VueCompositionAPI) 的安全版本公開：
import { install } from 'vue-demi'
install()
在實際的程式碼中，直接用就好
當你使用vue Api時，請從vue-demi裡匯入，它會自動根據使用者使用的環境，而被重定向到[email protected]或者[email protected] + @vue/composition-api。
當用戶要建立一個Vue外掛/庫時，只需將vue-demi安裝為依賴項並將其匯入，然後像之前一樣釋出你的外掛/庫，使用者的軟體包就會變得通用。
import {defineComponent, PropType, h, isVue2} from "vue-demi"
export default defineComponent({
// ...
})
但是還是的修改你package 程式碼：
{
"peerDependencies": {
"@vue/composition-api": "^1.4.3",
"vue": "^2.6.12 || >=3.2.37"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
}
參考文章：
使用 Vue Demi 構建通用的 Vue 元件庫 https://developer.51cto.com/article/700797.html
一庫】vue-demi: 一拳打穿vue2和3的版本次元壁 https://juejin.cn/post/7032860019880099847
Vue Demi https://madewith.cn/502
轉載本站文章《vue2升級vue3：Vue Demij打通vue2與vue3壁壘，構建通用元件》,
請註明出處：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8866.html