¡Lanzamiento del convertidor Vue2 a API de composición! Ayuda a actualizar la configuración de Script

Vue2 Opitons api a Vue 3 Composición api

usar en línea

sitio web

Gitee: vue2-to-composition-api

Github: vue2-to-composition-api

Con el lanzamiento de la versión Vue2.7, tiene un papel muy importante en la promoción del grupo de usuarios de Vue2 de la API de opciones a la API de composición. Es vue2-to-composition-apiuna herramienta de aplicación en línea que puede convertir la API de opciones en la API de composición y exportar directamente el Script setupcontenido después de la conversión , lo que ayuda a Vue2 Project a reducir el costo de migración de sintaxis de la API de opciones

Precauciones

  • TemplateEl contenido de no está dentro del alcance del análisis del convertidor y debe Datareemplazarse
  • Mixin, Componenty otro contenido externo que no se puede analizar, debe eliminarse antes de la conversión
  • Después de la conversión, aún quedan this.datos que apuntan a fuentes desconocidas
  • Si usa instrucciones que están en desuso para Vue3, como $on, $once, , $offetc., debe eliminarlas manualmente y el convertidor seguirá apuntando a la instancia de vm
  • En términos de ideas de diseño, la herramienta de conversión será más compatible con la versión Vue 2.7. Para otros problemas, consulte la documentación del sitio web o debajo de este artículo

Props / Conversión de datos de datos

Conversión de propiedad de calculadora calculada

Ver la transición del oyente

Transición del ciclo de vida del ciclo de vida

conversión de método de métodos

Instalar (recomendado para usar el sitio web en línea)

npm install vue2-to-composition-api

Conversión usando conversión

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)

Contenido no analizable

No escriba Mixin, Componentespere contenido externo, el convertidor no puede analizar archivos externos, Mixinlas variables y los métodos mezclados en el interno deben manejarse manualmente, y las variables dinámicas o el contenido empalmado tampoco pueden analizarse o analizarse incorrectamente

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

Cambios de datos en Plantilla

Después de la conversión Template, los Datadatos deben tener el .dataprefijo . La razón es que muchos desarrolladores han cambiado la dirección de los datos de tipo de referencia en la sintaxis de la API de opciones (a continuación), que Datase convertirá en un objeto completo para que sea compatible con tales operaciones. , el costo de iteración adicional de este método es menor

API de opciones:

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

API de composición:

<template>
  <div>{{ data.userInfo }}</div>
</template>
import { reactive } from 'vue'

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

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

Filtrar cambios en Plantilla

Filterha quedado en desuso, se convertirá al Functioncontenido , es necesario Templatecambiar Filterel método de llamada en

API de opciones

<template>
  <div>{{ married | toMarried }}</div>
</template>
export default {
  name: 'Sample',
  filters: {
    toMarried(value) {
      return value ? 'Yes' : 'No'
    }
  }
}

API de composición:

<template>
  <div>{{ toMarried(data.married) }}</div>
</template>
function toMarried(value) {
  return value ? 'Yes' : 'No'
}

Router3.x y Vuex3.x se amplían en Vue2.7

Si no Vue2.7desea actualizar Router4y en el proyecto, puede obtener , , , Vuex4de la vueinstanciaRouterRouterStore

import { getCurrentInstance } from 'vue'

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

dirección Git

casa rural

Github

Supongo que te gusta

Origin www.oschina.net/news/202744
Recomendado
Clasificación