Vue2 to Composition API 转换器发布！助力升级Script setup

KodeRover 联合 OSCHINA 推出云原生 DevOps 现状调研问卷，欢迎填写>>>>>

Vue2 Opitons api to Vue 3 Composition api

在线使用

网站

Gitee: vue2-to-composition-api

Github: vue2-to-composition-api

随着Vue2.7版本的发布，对与Vue2用户群体从Options API 转向Composition API 有着巨大的推动作用，vue2-to-composition-api 是一款可以将Options API转换成Composition API的在线应用工具，转换后直接导出 Script setup 内容，帮助Vue2项目减少Options API语法迁移成本

注意事项

• Template 中的内容不在转换器解析范畴内，需要手工替换 Data 数据源
• Mixin、Component 等外部内容无法被解析，转换前需将其剔除
• 转换后仍然留下this.指向的都是未知来源的数据
• 如果你使用了被Vue3废弃的指令，如 $on、$once、$off 等，都需要手工进行移除，转换器仍然会指向vm实例下
• 转化工具在设计思路上，对Vue2.7版本会更加友好，其他问题详见网站文档或本文下方

Props / Data 数据转换

Computed 计算器属性转换

Watch 侦听器转换

Life cycle 生命周期转换

Methods 方法转换

Install 安装（推荐使用在线网站）

 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) 

无法解析的内容

请不要键入 Mixin、Component 等外部内容，转换器无法解析外部的文件，Mixin 混入内部的变量与方法都需另外手工处理，动态变量或者拼接的内容也同样无法被解析或解析错误

 export default {   name: 'Sample',   mixins: [myMixin],   components: { Echart },   methods: {     onSubmit(propName) {       this[propName] = '123'       this.$emit(propName + '-change')     }   } } 

Template中的Data变更

转换后需为 Template 中的 Data 数据需加上 .data 前缀，其原因是许多开发者在Options API语法中做了改变引用类型数据地址的行为（如下），Data 将会被转换为一个完整的对象以兼容此类操作，此方式额外产生的迭代成本更小

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 已经被废弃，它将会被转换为外部的 Function 内容，需要在 Template 中改变 Filter 的调用方式

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> 

 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) 0

Vue2.7中延用Router3.x、Vuex3.x

如若不想在 Vue2.7 项目中更新 Router4 与 Vuex4 ，可以从 vue 实例中获取 Router、Router、Store

 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) 1

---

Git地址

Gitee

Github