Lecciones aprendidas al escribir la próxima versión principal de Vue.js

Publicado por Evan You

Durante el año pasado, el equipo de Vue ha estado trabajando en la próxima versión principal de Vue.js, que esperamos lanzar en la primera mitad de 2020 (este trabajo está en curso a partir de este escrito). La idea de una nueva versión principal de Vue se formó a fines de 2018, cuando la base del código Vue 2 tenía aproximadamente dos años y medio. Esto puede no parecer un período tan largo en la vida del software, pero las ideas del front-end han cambiado mucho durante este período.

Dos consideraciones clave nos llevaron a escribir una nueva (y reescribir la antigua) versión central de Vue: primero, la disponibilidad de nuevas funciones de JavaScript en los navegadores comunes. En segundo lugar, problemas de diseño y arquitectura en la base del código actual, identificados con el tiempo.

¿Por qué reescribir?

Usando nuevas características del lenguaje

ES2015, JavaScript — ECMAScript, ES — , . , , Vue.
Proxy, . Vue — , (state), DOM. Vue 2 , . Proxy Vue, , .

Proxy — , . — , .

Vue 2 , - . , (templates) , sourcemap . , Vue 2 , , DOM, , . , .

, , , . , , , . .

Vue 3 2018 . .

Typescript

Vue 2 ES. , . . Facebook Flow type checker, ES. Flow , , ; , . , , TypeScript Visual Studio Code.

, Vue TypeScript . , TypeScript , . TypeScript , .

(decoupling)

monorepo, , API, . , , . , , , .

RFC

2018 DOM. , , API. .

, . Vue , . , RFC (Request for Comments) 2019 . RFC , , , . GitHub , , .

RFC , , , feature requests.

- . Vue 2 , , .

DOM

Vue : HTML- , , DOM-. , DOM , DOM . , , , , JavaScript, - . , , (bindings) — DOM , .

, . Vue 2 , , - . Vue 3 AST transform pipeline, (transform) .

, . , DOM DOM, DOM, , , . , .

, DOM , , , . , (runtime) : , . :

-, , , (, v-if v-for). (template) «», , . , — . DOM, , , .

-, , . , .

-, DOM , . , , , . .

-: Vue 3 Vue 2.

. -, , , JavaScript . . Vue — Vue 2 23 — :
-, . , , (transitions), - , .

-, , . , . , .

— , tree-shaking — , . , , .

Vue 3 , API ES . , . tree-shaking , , .

"", . . Vue 3 10 — Vue 2, .

Vue . Vue . Vue , , . , TypeScript, , Vue 2 .

Vue 3 TypeScript, (Class API). , , , , , , , JavaScript. , Class API , , TypeScript.

. React Hooks, API- , , Composition API. , Composition API , (statefull components), , TypeScript.

. Composition API , . Vue 3 , Composition API Options API . , , . , , , Composition API Options API. , .

Vue, , HTML/CSS, , jQuery, , , -, , . : , , ; , , , .

Vue , . Vue « », API, . CDN , HTML Options API, (CLI), Composition API.

Todavía tenemos mucho trabajo por hacer para hacer realidad nuestra visión: lo más importante, actualizar las bibliotecas de soporte, la documentación y las herramientas para garantizar una transición sin problemas a la nueva versión. Trabajaremos duro en los próximos meses y estamos esperando, no esperaremos para ver qué crea la comunidad con Vue 3.