Lições aprendidas ao escrever a próxima versão principal do Vue.js

Postado por Evan You

No ano passado, a equipe do Vue vem trabalhando na próxima versão principal do Vue.js., que esperamos lançar no primeiro semestre de 2020 (este trabalho está em andamento até o momento da redação deste artigo). A ideia de uma nova versão principal do Vue foi formada no final de 2018, quando a base de códigos do Vue 2 tinha cerca de dois anos e meio de idade. Isso pode não parecer um período tão longo na vida do software, mas as idéias do front-end mudaram muito nesse período.

Duas considerações importantes nos levaram a escrever uma nova (e reescrever a antiga) versão principal do Vue: primeiro, a disponibilidade de novos recursos JavaScript em navegadores comuns. Em segundo lugar, problemas de design e arquitetura na base de código atual, identificados ao longo do tempo.

Por que reescrever

Usando novos recursos de idioma

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.

Ainda temos muito trabalho a realizar para concretizar nossa visão - o mais importante é atualizar as bibliotecas, documentação e ferramentas de suporte para garantir uma transição suave para a nova versão. Trabalharemos duro nos próximos meses e aguardamos - não vamos esperar para ver o que a comunidade cria com o Vue 3.