Vue2 Opitons api to Vue 3 Composition api
在線使用
網(wǎng)站
Gitee: vue2-to-composition-api
Github: vue2-to-composition-api
前言
隨著Vue2.7版本的發(fā)布尉咕，對與Vue2用戶群體從Options API 轉向Composition API 有著巨大的推動作用莹弊，vue2-to-composition-api 是一款可以將Options API轉換成Composition API的在線應用工具，轉換后直接導出 Script setup 內(nèi)容翁潘，幫助Vue2項目減少Options API語法遷移成本
注意事項
-
Template中的內(nèi)容不在轉換器解析范疇內(nèi)趁冈，需要手工替換Data數(shù)據(jù)源 - 如果你使用了被Vue3廢棄的指令，如
$on拜马、$once渗勘、$off等，轉換器仍然會指向vm實例下 - 轉化工具在設計思路上俩莽，對Vue2.7版本會更加友好旺坠，其他問題詳見網(wǎng)站文檔或本文下方
Git地址
Props / Data 數(shù)據(jù)轉換
Computed 計算器屬性轉換
Watch 偵聽器轉換
Life cycle 生命周期轉換
Methods 方法轉換
Install 安裝（推薦使用在線網(wǎng)站）
npm install vue2-to-composition-api
Conversion 使用轉換
import Vue2ToCompositionApi from 'vue2-to-composition-api'
const vue2ScriptContentStr = `
export default {
name: 'Sample',
props: {
userInfo: {
type: Object,
required: false,
default: () => ({
userName: 'Todd Cochran',
userAge: 20
})
}
},
data() {
return {
firstName: '',
lastName: ''
}
}
}`
const vue3ScriptContentStr = Vue2ToCompositionApi(vue2ScriptContentStr)
console.log('Hello! Composition API\n', vue3ScriptContentStr)
無法解析的內(nèi)容
請不要鍵入 Mixin、Component 等外部內(nèi)容扮超，轉換器無法解析外部的文件取刃，Mixin 混入內(nèi)部的變量與方法都需另外手工處理，動態(tài)變量或者拼接的內(nèi)容也同樣無法被解析或解析錯誤
export default {
name: 'Sample',
mixins: [myMixin],
components: { Echart },
methods: {
onSubmit(propName) {
this[propName] = '123'
this.$emit(propName + '-change')
}
}
}
Template中的Data變更
轉換后需為 Template 中的 Data 數(shù)據(jù)需加上 .data 前綴出刷，其原因是許多開發(fā)者在Options API語法中做了改變引用類型數(shù)據(jù)地址的行為（如下）璧疗，Data 將會被轉換為一個完整的對象以兼容此類操作，此方式額外產(chǎn)生的迭代成本更小
Options API:
<template>
<div>{{ userInfo }}</div>
</template>
export default {
name: 'Sample',
data() {
return {
userInfo: {}
}
},
created() {
this.userInfo = { name: 'Casey Adams', age: 80 }
}
}
Composition API:
<template>
<div>{{ data.userInfo }}</div>
</template>
import { reactive } from 'vue'
const data = reactive({
userInfo: {}
})
data.userInfo = { name: 'Casey Adams', age: 80 }
Template中的Filter變更
Filter 已經(jīng)被廢棄馁龟，它將會被轉換為外部的 Function 內(nèi)容病毡，需要在 Template 中改變 Filter 的調(diào)用方式
Options API
<template>
<div>{{ married | toMarried }}</div>
</template>
export default {
name: 'Sample',
filters: {
toMarried(value) {
return value ? 'Yes' : 'No'
}
}
}
Composition API:
<template>
<div>{{ toMarried(data.married) }}</div>
</template>
function toMarried(value) {
return value ? 'Yes' : 'No'
}
Vue2.7中延用Router3.x、Vuex3.x
如若不想在 Vue2.7 項目中更新 Router4 與 Vuex4 屁柏，可以從 vue 實例中獲取 Router啦膜、Router、Store
import { getCurrentInstance } from 'vue'
const $vm = getCurrentInstance()
const router = $vm.proxy.$router
const route = $vm.proxy.$route
const store = $vm.proxy.$store
Package: vue2-to-composition-api
E-mail: diquick@qq.com
Author: wd3322
