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

测试例子