Vue2 to Composition API converter released! Help to upgrade Script setup

Vue2 Opitons api to Vue 3 Composition api

use online

website

With the release of the Vue2.7 version, it has a huge role in promoting the Vue2 user group from the Options API to the Composition API. It vue2-to-composition-apiis an online application tool that can convert the Options API to the Composition API, and directly export the Script setupcontent , helping Vue2 Project to reduce Options API syntax migration cost

Precautions

TemplateThe content in is not within the scope of converter analysis and needs to be replaced manually. DataData source
Mixin, Componentand other external content that cannot be parsed, it needs to be removed before conversion
this.After conversion, data still pointing to unknown sources is still left
If you use instructions that are deprecated by Vue3, such as $on, $once, , $offetc., you need to remove them manually, and the converter will still point to the vm instance
In terms of design ideas, the conversion tool will be more friendly to the Vue2.7 version. For other issues, please refer to the website documentation or below this article

Props / Data data conversion

Computed calculator property conversion

Watch listener transition

Life cycle life cycle transition

Methods method conversion

Install (recommended to use the online website)

npm install vue2-to-composition-api

Conversion using 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)

Unparseable content

Please do not type Mixinin, Componentwait for external content, the converter cannot parse external files, Mixinthe variables and methods mixed into the internal need to be handled manually, and dynamic variables or spliced content also cannot be parsed or parsed incorrectly

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

Data changes in Template

After conversion Template, the Datadata in must be .dataprefixed with . The reason is that many developers have changed the address of the reference type data in the Options API syntax (below), which Datawill be converted into a complete object to be compatible with such operations. , the additional iteration cost of this method is smaller

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 }

Filter changes in Template

Filterhas been deprecated, it will be converted to external Functioncontent , need Templateto change Filterthe invocation method of

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'
}

Router3.x and Vuex3.x are extended in Vue2.7

If you don't Vue2.7want to update Router4and in the project, you can get , , , Vuex4from the vueinstanceRouterRouterStore

import { getCurrentInstance } from 'vue'

const $vm = getCurrentInstance()
const router = $vm.proxy.$router
const route = $vm.proxy.$route
const store = $vm.proxy.$store

Git address

Gitee

Github