Vue2からCompositionAPIへのコンバーターがリリースされました！スクリプト設定のアップグレードを支援する

Vue2OpitonsapiからVue3Compositionapiへ

オンラインで使用する

Webサイト

Gitee：vue2-to-composition-api

Github：vue2-to-composition-api

Vue2.7バージョンのリリースにより、Vue2ユーザーグループをOptionsAPIからCompositionAPIに昇格させる上で大きな役割を果たします。これvue2-to-composition-apiは、OptionsAPIをCompositionAPIに変換し、直接エクスポートできるオンラインアプリケーションツールです。Script setup変換後のコンテンツ、Vue2ProjectがOptionsAPI構文の移行コストを削減するのに役立ちます

予防

• Templateのコンテンツはコンバーター分析の範囲外であり、手動で置き換える必要があります。Dataデータソース
• Mixin、Componentおよび解析できないその他の外部コンテンツは、変換前に削除する必要があります
• this.変換後も、不明なソースを指しているデータは残ります
• 、、など$on、Vue3で非推奨となった命令を使用する場合は、それらを手動で削除する必要があります。そうすれば、コンバーターは引き続きvmインスタンスを指します。$once$off
• デザインのアイデアに関しては、変換ツールはVue2.7バージョンに適しています。その他の問題については、Webサイトのドキュメントまたはこの記事の下を参照してください。

小道具/データデータ変換

計算機のプロパティ変換

リスナーの移行を見る

ライフサイクルライフサイクル移行

メソッドメソッド変換

インストール（オンラインWebサイトの使用をお勧めします）

npm install vue2-to-composition-api

変換を使用した変換

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データには.dataプレフィックス。その理由は、多くの開発者がオプションAPI構文（下記）の参照型データのアドレスを変更したためです。これは、Dataこのような操作と互換性のある完全なオブジェクトに変換されます。 、このメソッドの追加の反復コストは小さくなります

オプションAPI：

<template>
  <div>{{ userInfo }}</div>
</template>

export default {
  name: 'Sample',
  data() {
    return {
      userInfo: {}
    }
  },
  created() {
    this.userInfo = { name: 'Casey Adams', age: 80 }
  }
}

構成API：

<template>
  <div>{{ data.userInfo }}</div>
</template>

import { reactive } from 'vue'

const data = reactive({
  userInfo: {}
})

data.userInfo = { name: 'Casey Adams', age: 80 }

テンプレートで変更をフィルタリングする

Filter非推奨になりました。外部Functionコンテンツます。呼び出しメソッドTemplateを変更Filterする必要があります。

オプションAPI

<template>
  <div>{{ married | toMarried }}</div>
</template>

export default {
  name: 'Sample',
  filters: {
    toMarried(value) {
      return value ? 'Yes' : 'No'
    }
  }
}

構成API：

<template>
  <div>{{ toMarried(data.married) }}</div>
</template>

function toMarried(value) {
  return value ? 'Yes' : 'No'
}

Router3.xとVuex3.xはVue2.7で拡張されています

プロジェクト内で更新しVue2.7たくない場合は、インスタンスから、、、を取得できます。Router4Vuex4vueRouterRouterStore

import { getCurrentInstance } from 'vue'

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

---

Gitアドレス

Gitee

Github