封装一个vue2和vue3都可以用的插件可以同时支持vue2吗?这就引出了这个问题,能不能让插件同时支持vue3和vue2呢?通用代码最简单的方法就是写vue2和vue3都可以运行的代码(指的是vue2和vue3都支持的API),就像人们对python2和python3所做的那样。编写这样的插件需要我们避免在vue3中新引入和在vue2中弃用的东西。也就是说,我们不能使用以下函数:CompositionAPIcompositionapi.syncmodifier.nativemodifierFiltersfilter.sync→v-model:...但是这样一来,就让我们放弃了新的高级api(compositionapi...),也增加了组件封装时的精神负担,需要时刻注意这些需要避免的api。分支管理为了解决这个问题,Vue核心团队有人提出用不同的分支来管理不同版本的插件。我认为这对于已经具有稳定版本的vue2的插件来说是一个很好的解决方案。因为代码隔离管理,可以针对不同的版本做不同的优化。这样做的坏处也很明显。如果我们需要支持一个新的功能或者修改一个bug,那么我们就需要改两份代码,花费两倍的时间。对于一个新的组件库,我不支持这种做法。构建脚本的方法其实就是写一套代码,但是我们是通过构建不同Vue版本的脚本来打包发布不同版本的插件。这里有一个开源的插件库,通过这个方案支持不同的vue版本。VueUse这种方式的问题是每个release版本都要build两次,文档上会引导用户安装对应的版本(vue也需要先手动安装@vue/composition-api库)。VueDemi简介VueDemi是一个开发工具库。安装好插件后,我们只需要写一套通用的代码就可以兼容vue2和vue3了。当你想开发vue插件库时,只需要使用vue-demi作为开发库依赖,就可以正常编写vue代码,发布你的vue包,你的vue包会自动支持不同的版本。{"dependencies":{"vue-demi":"latest"}}importVue,{ref,reactive}from'vue-demi'这个插件的原理是这样的,它写了一个postinstall脚本(这个其实就是一个npmhook),所有包安装完成后,hook执行脚本会检查本地安装的vue版本,针对不同版本重定向导出不同的插件版本。如果本地vue版本是2.0,会自动安装@vue/composition-api,如果是3.0,则不会安装。下面是一个测试示例,使用vue-demi打包一个插件,安装在不同的vue版本项目中。测试范例
