wd3322 Vue2 to Composition APIAPI 轉換器

vue2-to-composition-api 是一款可以將Options API轉換成Composition API的在線應用工具，轉換后直接導出 Script setup 內(nèi)容，幫助Vue2項目減少Options API語法遷移成本

網(wǎng)站

Gitee: vue2-to-composition-api

Github: vue2-to-composition-api

Git地址

Gitee

Github

在線使用

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 的調用方式

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