Introducción

INFO

¿Usted es nuevo a Vue.js? Consulte nuestra guía esencial para empezar.

Este guía es principalmente para usuarios con experiencia previa de Vue 2 quien quiere aprender sobre las nuevas características y cambios en Vue 3. Este no es algo que tiene que leer desde arriba hasta abajo antes de probar Vue 3. Mientras se ve como que mucho ya han cambiado, muchos de los que ya sabe y a usted le gustan sobre Vue todavía mantienen lo mismo, pero queremos ser lo más minucioso posible y proveemos explicaciones y ejemplos detalladas para cada cambio documentado.

• Inicio Rápido
• Compilación para Migración
• Nuevas Características Destacadas
• Cambios Rotundos
• Librerías de Soporte

Visión General

Empiece a aprender Vue 3 en Vue Mastery (opens new window).

Inicio Rápido

Si quiere probar Vue 3 en un nuevo proyecto rápidamente:

• Mediante CDN: <script src="https://unpkg.com/vue@next"></script>

• playground dentro del navegador en Codepen (opens new window)

• Sandbox dentro del navegador en CodeSandbox (opens new window)

• Andamio (scaffold) mediante Vite (opens new window):

  npm init vite hello-vue3 -- --template vue # O yarn create vite hello-vue3 --template vue
  

• Scaffold via vue-cli (opens new window):

  npm install -g @vue/cli # O yarn global add @vue/cli
  vue create hello-vue3
  # seleccionar el preajuste vue 3
  

Compilación para Migración

Si tiene un proyecto o librería existente de Vue 2 que intente actualizar a Vue 3, proveemos una compilación de Vue 3 que ofrezca APIs compatibles con Vue 2. Echa una vistazo a la página compilación para migración para más detalles.

Nuevas Características Destacadas

Algunas de las nuevas características para ver en Vue 3 incluyen:

• API de Composición
• Teleport
• Fragmentos
• Opción de componentes emits
• API createRenderer de @vue/runtime-core (opens new window) para crear renderizadores personalizados
• Azúcar sintaxis de API de composición de SFC (<script setup>)
• Variables CSS impulsados por estados en SFC (v-bind en <style>)
• <style scoped> de SFC ahora puede incluir reglas globales o reglas que solo se dirigen a contenido de slot (opens new window)
• Suspense experimental

Cambios Rotundos

El siguiente consiste una lista de cambios rotundos desde 2.x:

API Global

• API Global de Vue se ha cambiado para utilizar una instancia de aplicación
• APIs Globales y internales se han reestructurado para ser capaz para tree-shake

Directivas de Plantillas

• El uso de v-model en componentes han sido rehecho, reemplazando v-bind.sync
• El uso de key en <template v-for> y nodos non-v-for ha cambiado
• La precedencia de v-if y v-for cuando se utilizan en el mismo elemento ha cambiado
• v-bind="object" ahora es sensible al orden
• El modificador v-on:event.native se ha eliminado
• El ref dentro de v-for ya no registra una matriz de refs

Componentes

• Componentes funcionales solo pueden ser creados utilizando una función plana
• El atributo functional en <template> de un componente de un solo archivo (SFC) y la opción de componente functional son deprecados
• Ahora se requiere el método defineAsyncComponent para crear componentes asíncronos
• Los eventos de componentes ahora deben ser declarados con la opción emits

Función Render

• Se ha cambiado la API de función render
• La propiedad $scopedSlots se ha eliminado y todos los slots son expuestos mediante $slots como funciones
• La propiedad $listeners se ha eliminado / fusionado con $attrs
• La propiedad $attrs ahora incluye los atributos class y style

Elementos Personalizados

• Las verificaciones de elementos personalizados ahora son realizadas durante el proceso de compilación de plantilla
• El uso del artibuto especial is es limitado a la etiqueta reservada <component> solamente

Otros cambios minores

• La opción de ciclo de vida destroyed se ha renombrado a unmounted
• La opción de ciclo de vida beforeDestroy se ha renombrado a beforeUnmount
• La función de factoría de props default ya no tiene acceso al contexto this
• Se ha cambiado la API de directiva personalizada para alinearse con ciclo de vida de componentes y se ha eliminado binding.expression
• La opción data siempre debe ser declarada como una función
• La opción data de los mixines ahora se fusionan superficialmente (shallowly)
• Se ha cambiado la estrategia de coación de atributos
• Se han renombrado unas clases de transición
• <TransitionGroup> ahora no renderiza elemento de envoltorio por defecto
• Al observar una matriz, el callback solo será disparado cuando la matriz sea reemplazada. Si necesita dispararlo en mutación, debe especificar la opción deep.
• Las etiquetas <template> sin ninguna directiva especial (v-if/else-if/else, v-for, o v-slot) ahora son tratadas como elementos planos y resultarán en un elemento nativo <template> en vez de renderizar el contenido interior de sí mísmo.
• Una aplicación montada no reemplaza el elemento al cual está montado
• Los eventos de ciclo de vida prefijados con hook: ahora utilizan el prefijo vnode-

APIs eliminados

• keyCode como modificadores de v-on
• métodos de instancias $on, $off and $once
• Filtros
• Atributos de plantillas en líneas
• La propiedad de instancia $children
• La opción propsData
• El método de instancia $destroy. Los usuarios ya no deberían manejar el ciclo de vida de componentes Vue individuales manualmente.
• Las funciones globales set y delete, y los métodos de instancias $set y $delete. Ya no son requeridos con la detección de cambios basado de proxy.

Librerías de Soporte

Todas las liberías y herramientas oficiales nuestras ahora soportan Vue 3, pero algunos de ellas son todavía en fase beta o versión candidata. Puede encontrar detalles para las librerías individuales abajo. La mayoría ahora son distribuidas utilizando la etiqueta de distribución next en npm. Intentamos cambiar a latest una vez que todas las librerías oficiales sean versiones compatibles y estables.

Vue CLI

Desde v4.5.0, vue-cli ahora provee la opción integrada para elegir Vue 3 cuando se cree un nuevo proyecto. Hoy puede actualizar vue-cli y ejecutar vue create para crear un proyecto de Vue 3.

• Documentación (opens new window)
• GitHub (opens new window)

Vue Router

Vue Router 4.0 provee soporte para Vue 3 y tiene un número de cambios rotundos propios. Echa una vistazo a su guía de migración (opens new window) para más detalles.

• Documentación (opens new window)
• GitHub (opens new window)
• RFCs (opens new window)

Vuex

Vuex 4.0 provee soporte para Vue 3 con la misma API como 3.x en gran medida. El sólo cambio rotundo es cómo se instala el plugin (opens new window).

• Documentación (opens new window)
• GitHub (opens new window)

Extenciones para Devtools

Estamos trabajando sobre una nueva versión de Devtools con una nueva interfaz de usuario y las internales refactorizadas para soportar múltiples versiones de Vue. Actualmente la nueva versión es en fase beta y solo soporta Vue 3 (para ahora). La integración entre Vuex y Router es también trabajo en proceso.

• Para Chrome: Instalarlo desde Chrome web store (opens new window)

  • Note: el canal beta podría tener conflictos con la versión estable de devtools, por lo tanto, podría necesitar temporalmente deshablitar la versión estable para que se funcione bien el canal beta.

• Para Firefox: Descargar la extención firmada (opens new window) (archivo .xpi en Assets)

Soporte de IDE

Es recomendado utilizar VSCode (opens new window) con nuestra extención oficial Volar (opens new window), que provee soporte de IDE comprehensivo para Vue 3.

Otros Proyectos

Proyecto	npm	Repo
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]

INFO

Para información adicional sobre la compatibilidad de Vue 3 con librerías y plugins, asegúrese de echar una vistazo a este problema en awesome-vue (opens new window).