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 Demi 扮演的角色

在 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 里导入，它会自动根据用户使用的环境，而被重定向到 vue@3.x 或者 vue@2.x + @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