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-api
una 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 setup
contenido 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
Template
El contenido de no está dentro del alcance del análisis del convertidor y debeData
reemplazarseMixin
,Component
y 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
, ,$off
etc., 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
, Component
espere contenido externo, el convertidor no puede analizar archivos externos, Mixin
las 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 Data
datos deben tener el .data
prefijo . 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 Data
se 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
Filter
ha quedado en desuso, se convertirá al Function
contenido , es necesario Template
cambiar Filter
el 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.7
desea actualizar Router4
y en el proyecto, puede obtener , , , Vuex4
de la vue
instanciaRouter
Router
Store
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