En 2019, la popularidad del marco Vue ha crecido increíblemente. El número de descargas semanales de Vue se ha duplicado: el año pasado fue de 600 mil y ahora es de 1.2 millones. La tan esperada tercera versión de Vue, la próxima versión del marco, saldrá en algún momento del primer trimestre de 2020.
En Vue 3.0. Se planean muchas características nuevas. Estas nuevas características están destinadas a aumentar la eficiencia de los programadores, mejorar la sintaxis y optimizar el rendimiento del sistema. Yo, como la persona que apoya a Vue, me esfuerzo por estar listo para usar las innovaciones inmediatamente después de que salgan.
Aquí reuní algunos consejos que son útiles para aquellos que desean prepararse para el advenimiento de Vue 3.0. Espero que quienes sigan estos consejos puedan acostumbrarse a las nuevas condiciones muy rápidamente.
1. Echa un vistazo a las últimas características de Vue 3.0.
Por supuesto, uno no puede prepararse para la llegada de algo completamente desconocido. Por eso es importante familiarizarse con los
cambios en Vue 3.0. Esto es a lo que recomiendo prestar especial atención:
- La API de composición le permite organizar mejor el código del componente.
- La compatibilidad con TypeScript ayuda, entre otras cosas, a simplificar la escritura de código debido a los mecanismos de finalización de entrada.
- Renderizado acelerado , logrado mediante la introducción de muchas optimizaciones en el marco que aumentan su rendimiento.
- Aumento de las propiedades estáticas , eliminando la necesidad de recrear elementos estáticos.
- Trabajar con objetos observables utilizando objetos proxy ayuda a mejorar el rendimiento y ampliar las capacidades para trabajar con objetos reactivos.
Además, le aconsejo que vea
esta actuación de Evan Yu con respecto al dispositivo Vue 3.0. Esta presentación le permite comprender mejor las ideas que están detrás del marco.
En general, es definitivamente importante saber exactamente qué aparecerá en la nueva versión del marco, qué cambiará. El hecho es que esto puede afectar la forma en que los programadores planifican la estructura de sus proyectos actuales. Especialmente en esos casos cuando se trata de nuevos proyectos. Esos nuevos proyectos Vue que se están creando ahora y se crearán en un futuro próximo deben hacerse teniendo en cuenta su transferencia a Vue 3.0. Gracias a esto, tal transición no se convertirá en una pesadilla.
2. Comience a aprender TypeScript
Uno de los cambios más comentados esperados en Vue 3.0. - Este es el soporte de TypeScript. La base del código de Vue se está reescribiendo en TypeScript. Esto les dará a los desarrolladores la oportunidad de usar sugerencias de tipo y herramientas de finalización de código en su IDE.
Es importante tener en cuenta que esto no significa que todos tengan que cambiar absolutamente a TypeScript. Los proyectos Vue aún se pueden escribir en JavaScript. Pero el uso de TypeScript aumenta la velocidad y la calidad del código.
TypeScript (TS) es un superconjunto de JavaScript. Este es un lenguaje, el código escrito en el que se compila en JavaScript (JS). La diferencia entre TS y JS es que TypeScript le permite especificar tipos de variables. Los errores en el código asociado con los tipos se pueden detectar en la etapa de compilación. Aquí hay un par de fragmentos de código de la
documentación de TypeScript. Uno de ellos está escrito en TypeScript, el otro en JavaScript.
Aquí está el código JS:
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Y aquí está el código TS:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Tenga en cuenta que en el código TS hay indicaciones de tipos de entidad. Pasar la función de
greeter TS no es una cadena, pero, por ejemplo, una matriz, dará como resultado un mensaje de error al intentar compilar el código TS.
Si quieres aprender TypeScript,
aquí tienes , un par de buenos recursos. De hecho, hay una gran cantidad de fuentes de información sobre ST. Entre ellos, puede encontrar exactamente lo que necesita.
3. Aprenda las características del patrón Vue
Vue 3.0. incluye muchas mejoras con respecto a la representación. Esto incluye elevar elementos estáticos y mejorar el trabajo con árboles de representación, e incluso la capacidad de escribir sus propios métodos de representación.
Para aprovechar al máximo lo que te ofrece Vue 3.0, definitivamente debes dominar las plantillas de Vue a la perfección. Quizás, naturalmente, la mejor fuente de conocimiento sobre las plantillas es la
documentación oficial de Vue.
Además, comprender cómo funciona el mecanismo para generar elementos estáticos y cómo se organizan los árboles de representación de bloques puede ayudar a aumentar la eficiencia del desarrollo de sus propias plantillas. Elevar elementos estáticos es un mecanismo cuya operación lleva al hecho de que los elementos estáticos no se recrean cada vez que se muestra la página. En cambio, los mismos elementos se usan constantemente.
Los árboles de representación, que consisten en bloques, ayudan a simplificar el monitoreo de objetos reactivos, reduciendo el número de operaciones realizadas durante la representación.
Usando bloques para formar un árbol de renderizado4. Comience con la API de composición
Una de las innovaciones más populares (y más controvertidas) de Vue 3.0. Es la API de composición. Vue 2 ahora usa las Opciones de API. Al usarlo, el código se distribuye por componente (datos, métodos, propiedades calculadas, etc.).
Gracias a la nueva API, todo el código se agrupará. Esto mejorará su legibilidad y simplificará la extracción y reutilización de la funcionalidad.
Composición APILos nuevos mecanismos funcionan al proporcionar acceso directo al sistema de reactividad central Vue, que permite a los desarrolladores controlar exactamente lo que se está monitoreando. Además, se introduce un nuevo método
setup() , que se llama inmediatamente después de
beforeCreate() e inmediatamente antes de
created() .
Lo más importante es que
la API de composición está disponible ahora, por lo que ya se puede usar en proyectos existentes.
5. Actualice el conocimiento del ciclo de vida de Vue
En la sección anterior, la API de composición era una nueva forma de agregar funcionalidad a los componentes. El hecho de que se llame al método de ciclo de vida del componente
setup() antes que al método
created() indica que
setup() no tiene acceso a los datos del componente, sus métodos o propiedades calculadas.
Ahora no está del todo claro cómo son las otras características nuevas de Vue 3.0. estará relacionado con el ciclo de vida del componente. Pero, independientemente de esto, aquellos que quieran comenzar a usar Vue 3.0. Productivamente lo antes posible deben actualizar sus conocimientos sobre los
métodos del ciclo de vida de Vue. Es decir, vale la pena prestar atención cuando ciertas propiedades están disponibles, en qué orden se llaman los métodos, y así sucesivamente.
Vue Life CycleResumen
Como resultado, me gustaría decir que vale la pena aprender a alguien que quiere aprender rápidamente nuevas tecnologías. Vale la pena pagar el mayor tiempo posible. El equipo de desarrollo de Vue definitivamente ha dejado claro a la comunidad cuál es el marco Vue 3.0. fue creado de tal manera que facilita la transición a él para aquellos que ya usan Vue. Por lo tanto, sería un error pensarlo de esta manera: "Vue 3 sale, esperaré el lanzamiento y luego lo resolveré". "Comprender" es mejor de antemano. Espero que lo que se discutió en este artículo ayude a todos a prepararse adecuadamente para la reunión Vue 3.0.
Estimados lectores! ¿Qué esperas de Vue 3.0.?
