用Vue?Demi同時支持Vue2和Vue3的方法
Vue Demi是什么
如果你想開發(fā)一個同時支持Vue2和Vue3的庫可能想到以下兩種方式：
1.創(chuàng)建兩個分支，分別支持Vue2和Vue3
2.只使用Vue2和Vue3都支持的API
這兩種方式都有缺點，第一種很麻煩，第二種無法使用Vue3新增的組合式 API，其實現在Vue2.7+版本已經內置支持組合式API，Vue2.6及之前的版本也可以使用@vue/composition-api插件來支持，所以完全可以只寫一套代碼同時支持Vue2和3。雖然如此，但是實際開發(fā)中，同一個API在不同的版本中可能導入的來源不一樣，比如ref方法，在Vue2.7+中直接從vue中導入，但是在Vue2.6-中只能從@vue/composition-api中導入，那么必然會涉及到版本判斷，Vue Demi就是用來解決這個問題，使用很簡單，只要從Vue Demi中導出你需要的內容即可：
import { ref, reactive, defineComponent } from 'vue-demi'Vue-demi會根據你的項目判斷到底使用哪個版本的Vue，具體來說，它的策略如下：
<=2.6: 從Vue和@vue/composition-api中導出2.7: 從Vue中導出（組合式API內置于Vue 2.7中）>=3.0: 從Vue中導出，并且還polyfill了兩個Vue 2版本的set和delAPI
接下來從源碼角度來看一下它具體是如何實現的。
基本原理
當我們使用npm i vue-demi在我們的項目里安裝完以后，它會自動執(zhí)行一個腳本：
{
"scripts": {
"postinstall": "node ./scripts/postinstall.js"
}
}// postinstall.js
const { switchVersion, loadModule } = require('./utils')
const Vue = loadModule('vue')
if (!Vue || typeof Vue.version !== 'string') {
console.warn('[vue-demi] Vue is not found. Please run "npm install vue" to install.')
}
else if (Vue.version.startsWith('2.7.')) {
switchVersion(2.7)
}
else if (Vue.version.startsWith('2.')) {
switchVersion(2)
}
else if (Vue.version.startsWith('3.')) {
switchVersion(3)
}
else {
console.warn(`[vue-demi] Vue version v${Vue.version} is not suppported.`)
}
導入我們項目里安裝的vue，然后根據不同的版本分別調用switchVersion方法。
先看一下loadModule方法：
function loadModule(name) {
try {
return require(name)
} catch (e) {
return undefined
}
}很簡單，就是包裝了一下require，防止報錯阻塞代碼。
然后看一下switchVersion方法：
function switchVersion(version, vue) {
copy('index.cjs', version, vue)
copy('index.mjs', version, vue)
copy('index.d.ts', version, vue)
if (version === 2)
updateVue2API()
}
執(zhí)行了copy方法，從函數名可以大概知道是復制文件，三個文件的類型也很清晰，分別是commonjs版本的文件、ESM版本的文件、TS類型定義文件。
另外還針對Vue2.6及一下版本執(zhí)行了updateVue2API方法。
updateVue2API方法我們后面再看，先看一下copy方法：
const dir = path.resolve(__dirname, '..', 'lib')
function copy(name, version, vue) {
vue = vue || 'vue'
const src = path.join(dir, `v${version}`, name)
const dest = path.join(dir, name)
let content = fs.readFileSync(src, 'utf-8')
content = content.replace(/'vue'/g, `'${vue}'`)
try {
fs.unlinkSync(dest)
} catch (error) { }
fs.writeFileSync(dest, content, 'utf-8')
}
其實就是從不同版本的目錄里復制上述三個文件到外層目錄，其中還支持替換vue的名稱，這當你給vue設置了別名時需要用到。
到這里，Vue Demi安裝完后自動執(zhí)行的事情就做完了，其實就是根據用戶項目中安裝的Vue版本，分別從三個對應的目錄中復制文件作為Vue Demi包的入口文件，Vue Demi支持三種模塊語法：
{
"main": "lib/index.cjs",
"jsdelivr": "lib/index.iife.js",
"unpkg": "lib/index.iife.js",
"module": "lib/index.mjs",
"types": "lib/index.d.ts"
}
默認入口為commonjs模塊cjs文件，支持ESM的可以使用mjs文件，同時還提供了可以直接在瀏覽器上使用的iife類型的文件。
接下來看一下分別針對三種版本的Vue具體都做了什么。
v2版本
Vue2.6版本只有一個默認導出：
我們只看mjs文件，cjs有興趣的可以自行閱讀：
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api.mjs'
function install(_vue) {
_vue = _vue || Vue
if (_vue && !_vue['__composition_api_installed__'])
_vue.use(VueCompositionAPI)
}
install(Vue)
// ...
導入Vue和VueCompositionAPI插件，并且自動調用Vue.use方法安裝插件。
繼續(xù)：
// ...
var isVue2 = true
var isVue3 = false
var Vue2 = Vue
var version = Vue.version
export {
isVue2,
isVue3,
Vue,
Vue2,
version,
install,
}
/**VCA-EXPORTS**/
export * from '@vue/composition-api/dist/vue-composition-api.mjs'
/**VCA-EXPORTS**/
首先導出了兩個變量isVue2和isVue3，方便我們的庫代碼判斷環(huán)境。
然后在導出Vue的同時，還通過Vue2的名稱再導出了一遍，這是為啥呢，其實是因為Vue2的API都是掛載在Vue對象上，比如我要進行一些全局配置，那么只能這么操作：
import { Vue, isVue2 } from 'vue-demi'
if (isVue2) {
Vue.config.xxx
}
這樣在Vue2的環(huán)境中沒有啥問題，但是當我們的庫處于Vue3的環(huán)境中時，其實是不需要導入Vue對象的，因為用不上，但是構建工具不知道，所以它會把Vue3的所有代碼都打包進去，但是Vue3中很多我們沒有用到的內容是不需要的，但是因為我們導入了包含所有API的Vue對象，所以無法進行去除，所以針對Vue2版本單獨導出一個Vue2對象，我們就可以這么做：
import { Vue2 } from 'vue-demi'
if (Vue2) {
Vue2.config.xxx
}
然后后續(xù)你會看到在Vue3的導出中Vue2是undefined，這樣就可以解決這個問題了。
接著導出了Vue的版本和install方法，意味著你可以手動安裝VueCompositionAPI插件。
然后是導出VueCompositionAPI插件提供的API，也就是組合式API，但是可以看到前后有兩行注釋，還記得前面提到的switchVersion方法里針對Vue2版本還執(zhí)行了updateVue2API方法，現在來看一看它做了什么事情：
function updateVue2API() {
const ignoreList = ['version', 'default']
// 檢查是否安裝了composition-api
const VCA = loadModule('@vue/composition-api')
if (!VCA) {
console.warn('[vue-demi] Composition API plugin is not found. Please run "npm install @vue/composition-api" to install.')
return
}
// 獲取除了version、default之外的其他所有導出
const exports = Object.keys(VCA).filter(i => !ignoreList.includes(i))
// 讀取ESM語法的入口文件
const esmPath = path.join(dir, 'index.mjs')
let content = fs.readFileSync(esmPath, 'utf-8')
// 將export * 替換成 export { xxx }的形式
content = content.replace(
/\/\*\*VCA-EXPORTS\*\*\/[\s\S]+\/\*\*VCA-EXPORTS\*\*\//m,
`/**VCA-EXPORTS**/
export { ${exports.join(', ')} } from '@vue/composition-api/dist/vue-composition-api.mjs'
/**VCA-EXPORTS**/`
)
// 重新寫入文件
fs.writeFileSync(esmPath, content, 'utf-8')
}
主要做的事情就是檢查是否安裝了@vue/composition-api，然后過濾出了@vue/composition-api除了version和default之外的所有導出內容，最后將：
export * from '@vue/composition-api/dist/vue-composition-api.mjs'
的形式改寫成：
export { EffectScope, ... } from '@vue/composition-api/dist/vue-composition-api.mjs'為什么要過濾掉version和default呢，version是因為已經導出了Vue的version了，所以會沖突，本來也不需要，default即默認導出，@vue/composition-api的默認導出其實是一個包含它的install方法的對象，前面也看到了，可以默認導入@vue/composition-api，然后通過Vue.use來安裝，這個其實也不需要從Vue Demi導出，不然像下面這樣就顯得很奇怪：
import VueCompositionAPI from 'vue-demi'
到這里，就導出所有內容了，然后我們就可以從vue-demi中導入各種需要的內容了，比如：
import { isVue2, Vue, ref, reactive, defineComponent } from 'vue-demi'v2.7版本
接下來看一下是如何處理Vue2.7版本的導出的，和Vue2.6之前的版本相比，Vue2.7直接內置了@vue/composition-api，所以除了默認導出Vue對象外還導出了組合式API：
import Vue from 'vue'
var isVue2 = true
var isVue3 = false
var Vue2 = Vue
var warn = Vue.util.warn
function install() {}
export { Vue, Vue2, isVue2, isVue3, install, warn }
// ...和v2相比，導出的內容是差不多的，因為不需要安裝@vue/composition-api，所以install是個空函數，區(qū)別在于還導出了一個warn方法，這個文檔里沒有提到，但是可以從過往的issues中找到原因，大致就是Vue3導出了一個warn方法，而Vue2的warn方法在Vue.util對象上，所以為了統(tǒng)一手動導出，為什么V2版本不手動導出一個呢，原因很簡單，因為這個方法在@vue/composition-api的導出里有。
繼續(xù)：
// ... export * from 'vue' // ...
導出上圖中Vue所有的導出，包括version、組合式API，但是要注意這種寫法不會導出默認的Vue，所以如果你像下面這樣使用默認導入是獲取不到Vue對象的：
import Vue from 'vue-demi'
繼續(xù)：
// ...
// createApp polyfill
export function createApp(rootComponent, rootProps) {
var vm
var provide = {}
var app = {
config: Vue.config,
use: Vue.use.bind(Vue),
mixin: Vue.mixin.bind(Vue),
component: Vue.component.bind(Vue),
provide: function (key, value) {
provide[key] = value
return this
},
directive: function (name, dir) {
if (dir) {
Vue.directive(name, dir)
return app
} else {
return Vue.directive(name)
}
},
mount: function (el, hydrating) {
if (!vm) {
vm = new Vue(Object.assign({ propsData: rootProps }, rootComponent, { provide: Object.assign(provide, rootComponent.provide) }))
vm.$mount(el, hydrating)
return vm
} else {
return vm
}
},
unmount: function () {
if (vm) {
vm.$destroy()
vm = undefined
}
},
}
return app
}
和Vue2的new Vue創(chuàng)建Vue實例不一樣，Vue3是通過createApp方法，@vue/composition-api插件polyfill了這個方法，所以針對Vue2.7，Vue Demi手動進行了polyfill。
到這里，針對Vue2.7所做的事情就結束了。
v3版本
Vue3相比之前的版本，最大區(qū)別是不再提供一個單獨的Vue導出：
import * as Vue from 'vue'
var isVue2 = false
var isVue3 = true
var Vue2 = undefined
function install() {}
export {
Vue,
Vue2,
isVue2,
isVue3,
install,
}
// ...因為默認不導出Vue對象了，所以通過整體導入import * as Vue的方式把所有的導出都加載到Vue對象上，然后也可以看到導出的Vue2為undefined，install同樣是個空函數。
繼續(xù)：
// ... export * from 'vue' // ...
沒啥好說的，直接導出Vue的所有導出內容。
繼續(xù)：
// ...
export function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
target[key] = val
return val
}
export function del(target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
delete target[key]
}
最后polyfill了兩個方法，這兩個方法實際上是@vue/composition-api插件提供的，因為@vue/composition-api提供的響應性API實現上并沒有使用Proxy代理，仍舊是基于Vue2的響應系統(tǒng)來實現的，所以Vue2中響應系統(tǒng)的限制仍舊還是存在的，所以需要提供兩個類似Vue.set和Vue.delete方法用來給響應性數據添加或刪除屬性。
到此這篇關于用Vue Demi同時支持Vue2和Vue3的方法的文章就介紹到這了,更多相關Vue Demi同時支持Vue2和Vue3內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了VUE : vue-cli中去掉路由中的井號#操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue data不可以使用箭頭函數問題，本文通過源碼解析給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue+Django項目部署詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
前段時間一直在學習vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關于vue項目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
今天小編就為大家分享一篇vue form 表單提交后刷新頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了結合axios對項目中的api請求進行封裝操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
overlay就是在地圖上以另外一種形式浮現在地圖上，常見的地圖覆蓋物為這三種類型，如：popup 彈窗、label標注信息、text文本信息等，接下來跟隨小編看下openlayers6之地圖覆蓋物overlay詳解，一起看看吧2021-09-09
這篇文章主要介紹了vue-router路由懶加載和權限控制的相關資料2017-12-12
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02