Lessons Learned from Writing the Next Major Version of Vue.js

Posted by Evan You

Over the past year, the Vue team has been working on the next major version of Vue.js, which we hope to release in the first half of 2020 (this work is ongoing as of this writing). The idea of ​​a new main version of Vue was formed at the end of 2018, when the Vue 2 code base was about two and a half years old. This may not seem like such a long period in the life of software, but the ideas of the front-end have changed a lot over this period.

Two key considerations led us to write a new (and rewrite the old) core version of Vue: first, the availability of new JavaScript features in common browsers. Secondly, problems of design and architecture in the current code base, identified over time.

Why rewrite

Using new language features

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.

We still have a lot of work to do to realize our vision - most importantly, update supporting libraries, documentation and tools to ensure a smooth transition to the new version. We will work hard in the coming months, and we are waiting - we won’t wait to see what the community creates with Vue 3.