Vue2 Opitons api to Vue 3 Composition api

在线使用

网站

前言

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

注意事项

Template 中的内容不在转换器解析范畴内，需要手工替换 Data 数据源
如果你使用了被Vue3废弃的指令，如 $on、$once、$off 等，转换器仍然会指向vm实例下
转化工具在设计思路上，对Vue2.7版本会更加友好，其他问题详见网站文档或本文下方

Git地址

Gitee

Github

Props / Data 数据转换

Computed 计算器属性转换

Watch 侦听器转换

Life cycle 生命周期转换

Methods 方法转换

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>

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

无法解析的内容

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

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

其他插件

Element Form to Json，快速构建表单应用，支持表单分组

Element Table to Json，快速构建表格应用，支持表格编辑

Package: vue2-to-composition-api

E-mail: diquick@qq.com

Author: wd3322

Vue2 to Composition API 语法转换器，助力升级Vue2.7/Script setup