【一库】vue-demi: 一拳打穿vue2和3的版本次元壁

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」

背景

写代码时，我们的目光究竟应该向前看还是向后看呢？
向前看是面向未来，使用最前沿的技术。
向后看是兼容并进，最大限度保证功能稳定。

两种思路没有对错之分，只有取舍之道。

对于vue 2.x的广大存量用户和vue 3.x的必然趋势之间，你既希望你写的代码能解燃眉之急，又希望你的代码能有更长的生命周期。
怎么办？
答案当然是：用vue-demi，我全都要！！！

src=http___pic4.zhimg.com_5我全都要-min.jpg

什么是Vue Demi ?

Vue Demi是一款开发工具。允许你为 Vue 2 和 3 编写通用 Vue 库。而无需担心用户安装的版本。

Vue Demi中的Demi一词，取的是法语中半的意思。个中含义，应该是类似vue 2.5的意思。
github主页
 作者Antfu的介绍博客

关键词：

通用Vue库。意味着这大多数情况下不是业务开发者会直接使用到的库，主要面向库开发者（vue组件库/vue插件等）
开发工具。供库开发者使用的工具，也就是说业务开发者不实际感知到它；

（Vue Demi 扮演的角色）

如何在你的库中安装与使用？

1. 安装与准备

1-1. 安装

npm i vue-demi
# or
yarn add vue-demi

或直接在package.json中加进dependencies

{
  "dependencies": {
    "vue-demi": "latest"
  },
}

1-2. 将vue和@vue/composition-api添加到你的peerDependencies里。

{
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-rc.1",
    "vue": "^2.0.0 || >=3.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  }
}

1-3. 在你的devDependencies里依赖vue2或者vue3（随便，都行）

{
  "devDependencies": {
    "vue": "^3.0.0" // or "^2.6.0"
  },
}

2. 使用

接下来，当你使用vue Api时，请从vue-demi里导入，它会自动根据用户使用的环境，而被重定向到vue@3.x或者vue@2.x + @vue/composition-api。

// 告别 import { ref, reactive } from 'vue'
// 采用下面的写法：
import { ref, reactive, defineComponent } from 'vue-demi'

3. 构建并发布

如果你使用vite构建，你需要取消Vue Demi的预构建，这样它才能正常工作。

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['vue-demi']
 }
})

现在，你的组件可以同时在vue2和vue3环境上运行了！！

额外的API

除了提供标准的组合式API以外，还提供了一些额外的API。

1. isVue2 isVue3

这组api可以区分当前运行时的vue版本，让你进行一些差异化的处理（如果有必要的话）。

import { isVue2, isVue3 } from 'vue-demi'

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

2. Vue2

你可以在此对vue2的全局方法进行调用。

import { Vue2 } from 'vue-demi'

if (Vue2) {
  Vue2.config.ignoredElements.push('x-foo')
}

更多方法、命令行CLI，请访问Vue Demi的github主页进行查看。
地址：

https://github.com/vueuse/vue-demi

原理

在安装期，该库使用了npm的postinstall钩子。安装完毕所有依赖后，脚本会检查本地依赖的vue版本，然后根据本地vue版本确定导出的api。

如果发现本地依赖的是vue@2，则脚本还会自动安装@vue/composition-api。

DEMO和示例

作者Antfu在此地址，放置了一个简易Demo。有兴趣可以看看。

都有谁在用它？

VueUse - Collection of Composition API utils
@vue/apollo-composable - Apollo GraphQL functions for Vue Composition API
vuelidate - Simple, lightweight model-based validation
vue-composition-test-utils - Simple vue composition api unit test utilities
vue-use-stripe - Stripe Elements wrapper for Vue.js
@opd/g2plot-vue - G2plot for vue
vue-echarts - Vue.js component for Apache ECharts.
fluent-vue - Vue.js integration for Fluent.js - JavaScript implementation of Project Fluent
vue-datatable-url-sync - Synchronize datatable options and filters with the url to keep user preference even after refresh or navigation
vue-insta-stories - Instagram stories in your vue projects.
vue-tiny-validate - Tiny Vue Validate Composition
v-perfect-signature - Pressure-sensitive signature drawing for Vue 2 and 3
vue-winbox - A wrapper component for WinBox.js that adds the ability to mount Vue components.
vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3
vue-chart-3 - Vue.js component for Chart.js
json-editor-vue - JSON editor & viewer for Vue 2 and 3.

【一库】系列的其他文章也很精彩哦~↓↓↓
# 【一库】专栏
 # 【一库】vueuse:我不许身为vuer,你的工具集只有lodash!
# 【一库】vue-demi: 一拳打穿vue2和3的版本次元壁
 # 【一库】yalc: 可能是最好的前端link调试方案（已经非常谦虚了）