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

前言

vue3的已经正式发布了,从官方文档来看,部分api和功能有较大的改动,刚好,最近想写个vue3的插件,转念一想那我能不能同时也支持vue2呢?就引出了这个问题,我们能使插件支持vue3的同时也能支持vue2么?

通用代码

最简单的方式就是写vue2和vue3都能运行的代码(指vue2与vue3都支持的api),就像人们为python2和python3那样处理。编写这样的插件要求我们避免使用在vue3中新引入的内容和vue2中不推荐的内容。换句话说,我们不能使用以下功能:

Composition API 组合式api .sync 修饰符 .native 修饰符 Filters 过滤器 .sync → v-model: ...

但是这种方式,让我们摒弃了新式先进的api(composition api ... ),也增加了封装组件时的心智负担,你需要时刻注意这些需要避免的api。

分支管理

为了解决这个问题,vue核心团队有人提出了使用不同的分支管理不同的版本插件。我认为这种对于已经存在vue2稳定版本的插件来说是一个很好的解决方案。因为存在代码隔离管理,所以针对不同的版本,可以做不同的优化。

这样做的缺点也是明显的,如果我们需要支持一个新的功能或修改一个bug,那么我们就需改两份代码,付出两倍的时间。对于一个新的组件库,我是不支持这种做法的。

构建脚本

这种方式其实就是通过写一套代码,但是我们通过构建不同的vue版本的脚本,打包发布为不同版本的插件。这里介绍一个开源插件库,就是通过该方案支持不同vue版本的。

VueUse

这种方式有个问题就是每次发布版本都得构建两次,并在说明文档上引导用户安装对应的版本(vue还需要手动先安装@vue/composition-api库)。

介绍Vue Demi

Vue Demi 是一个开发工具库,我们在安装该插件之后,只需要写一套通用的代码就能兼容vue2和vue3。
当你想要去开发一个vue的插件库时,只要将vue-demi作为一个开发库依赖,然后你就可以正常写vue代码,发布你的vue包,你的vue包就自动支持不同的版本。

{
 "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版本项目安装它。

测试例子