It’s a real hammer, You Da’s proper two-dimensional fan - talk about the evolution of Vue

Let’s take a look at the release code of the Vue version first . Can you see what’s coming? You Da is simply a two-dimensional fan with clear thinking .

You Dazhi You Yuxi

Animatrix (0.9) - "The Matrix Animated Edition"

Blade Runner (0.10) —— "Blade Runner: The Darkness of 2022" is an animated short film directed by Shinichiro Watanabe

Cowboy Bebop (0.11) —— "Cowboy Bebop" is an original TV animation produced by Japan's SUNRISE Animation Company

Dragon Ball (0.12) —— "Dragon Ball" is a juvenile manga serialized by Japanese cartoonist Akira Toriyama from 1984 to 1995

Evangelion (1.0) —— "Neon Genesis Evangelion" is a Japanese animation work co-produced by GAINAX and Dragon Son Studio

Ghost in the Shell (2.0) —— "Ghost in the Shell" is a youth comic publication created by Masamune Shiro in May 1989

Hunter X Hunter (2.1) —— "Hunter x Hunter" is a comic work by Japanese cartoonist Yoshihiro Togashi

Initial D (2.2) —— "Initial D" is a youth comic drawn by cartoonist Shigeno Shuichi

JoJo's Bizarre Adventure (2.3) —— "JOJO's Bizarre Adventure" is a comic written by Japanese cartoonist Araki Hirohiko

Kill la Kill (2.4) —— "Kill the Girl" is a passionate fantasy animation created by Kazuki Nakajima

Level E (2.5) —— "Level E" is a sci-fi manga by Japanese manga artist Yoshihiro Togashi

Macross (2.6) —— "Macross" is an original TV animation produced by Dragon Son Studio

Naruto (2.7) —— Uzumaki Naruto, the male protagonist in the Japanese manga " Naruto " and its derivative works

One Piece (3.0) —— "One Piece" is a boy manga work drawn by Japanese manga artist Eiichiro Oda

Pluto (3.1) —— "Pluto" is a manga by Urasawa Naoki

Quintessential Quintuplets (3.2) —— "The Bride of Quintuplets" is a comic work created by Chunchang Cong

Can it be seen from here, You Da is a typical cartoon little prince. I'm not a headline party, haha! !

What will be the codename for version 3.3? First of all, it must start with R, so why not guess? ?

Here, we have seen the codename of the version released by Vue, which not only makes people want to ask, how did Vue develop until now , and what is the process in it, let's talk about it! In fact, this is the focus of this article, haha!

1 Introduction

VueConf China 2022 will be held online on December 10, 2022. In the meeting, Youda gave us a detailed account of the entire evolution of Vue, so this article will be recorded in Youda's tone.

Vue has been developed for 7 or 8 years, and it is not a young project. How Vue will develop in the future and how to take each step needs to be carefully considered. Therefore, it is appropriate to look back and see how Vue has developed to this form today.

This can not only provide ideas and ideas for future development, but also for new users or students who don't know Vue, they can also have a complete understanding of Vue's history and help better understand how design decisions come about.

2. Library phase

Library Phase(Pre 1.0)
2013 - 2015

First, explain my personal understanding of the difference between libraries and frameworks:

Library: It is directly embedded into the existing system, it is very simple to use, and has no effect on this system
Framework: It defines a wider set of engineering practices, and expects users to follow certain best practices or corresponding supporting tools, and follow a set of completed specifications

2.1 Phase development

At that time, Vue was still in the stage of library, and the whole development was as follows:

2013.12 - The first version named "Vue.js" (0.6.0)

Before this called (Seed)
2014.02 - First public release on HackerNews

Started getting more than 400 github starts after posting on HackerNews

HackerNews is a very good technology community in foreign countries. It is very famous in the technology and entrepreneurial circles. Especially if you want to mix North American and European circles, HN is a community and channel that you can’t avoid.
2014.10 - First implementation of Vue SFC single file component (vueify)

Plugin based on Browserify packager

Browserify is a very old packaging tool, and new students should have never heard of it. If you are interested, you can search for it yourself.
2014.11 - First complete rewrite (0.11)

Before that, they were all amateurs, more for fun. Version 0.11, start writing this project seriously, and seriously think about how to do it well

2.2 Design focus and features

Design Focus for the Library Phase
- A responsive system based on ES5 getter/settersand native JS objects
  
  At that time, the support of IE8 and below and even IE6 had a wide range of needs, but the native support of the browser getter/setterswas needed (there was no good way to hack it), so in fact, there were certain risks in using this to implement responsiveness at that time.
  
  But I didn't care about it at the time, because it wasn't a problem. Anyway, not many people used it at the time, so I didn't think about making it compatible with IE8 and below. First based on this idea (fun) to achieve.
  
  In fact, this idea can be used for reference. When working on a project or project, you don’t have to think about compatibility with everything at the beginning. It’s feasible to make it first and then optimize it.
- MVVM / template data binding
  
  Model-View-ViewModel was first proposed by Knockout.js . In fact, we don’t use this word very much now, because we find that it doesn’t make much sense to apply the current framework to a model.
- <script>Simple library that can be directly referenced like jQuery
  
  It is also the only supported usage. This is a typical library, and it will not cause intrusion or restrictions on your application. For example, whether to use packaging tools or not, it mainly provides a data-driven development experience . This is what Vue was able to do at that time and at that stage. The main reason for getting initial users.
Characteristics of the library phase
- (Not yet) a frame
- APIs affected by Backbone / Ractive:
  
  Backbone / Ractive is the predecessor of Sevlte
  - Responsive systems and component instances are strongly coupled, which affects logic reuse
    
    All responsiveness is realized by operating thison . The advantage is that it is easier to understand, intuitive, and more in line with the class-based API. The disadvantage is that it is difficult to achieve logic reuse
    
    In fact, this still exists in the options API, and it was not resolved until vue3, which separated the responsive system and component instances
  - Mixins were not introduced until 0.11
    
    Mixins still had a lot of problems, so they were deprecated later.
- Still exploring and perfecting template syntax and scope rules
- DOM-based rendering mechanism
  - No "compilation" process
    
    I didn't expect it without compiling
  - Templates are instantiated directly as DOM trees
  - Data binding by traversing the DOM tree
  - Similar to the current implementation of petite-vue
    
    petite-vue is a reimplementation (new display) of vue1 after Vue3, a more lightweight rewrite, presenting the mechanism of vue1 in a more modern way. petite-vue is suitable for scenarios that are more lightweight and do not require so much engineering practice.

3. Framework stage

Framework Phase (1.x)

2015-2016

3.1 Stage development

2015.08 - The first version of Vue Router was released
2015.09 - Start developing 1.0

Written based on 0.11 12, mainly design changes, and more to completely improve the template syntax
2015.10.26 - 1.0 "Evangelion" released

evangelion "Evangelion" mentioned at the beginning of the article
2015.12 - The first version of vue-cli was released

It is not at the same level as the current vue-cli, but more of a tool for pulling templates. But at this time, it can be regarded as slowly introducing engineering
2016.03 - The first version of Vuex was released

3.2 Design focus

Design Focus in the Framework Phase

Stable template syntax and scope design
- Confirmed the syntax of v-bind, v-on and corresponding shorthand
- First introduction of v-for (replacing v-repeat)
Before 1.0, basically every small version of the api changed a lot, and then it gradually stabilized
Extend the scope of the project to the SPA framework
- SPA routing
- state management
- tool chain
  - hot update
  - Scoped CSS

4. General framework stage

Universal Framework Phase (2.x)

2016-2019

4.1 Stage development

2016.03 - The concept of "progressive framework" was clearly proposed for the first time
2016.04 - Start developing 2.0

Leaving Meteor Development Group to start working on this project full-time
2016.10.01 - 2.0 "Ghost in the Shell" released

Ghost In The Shell "Ghost in the Shell"
2016.11 - 2.1 "Hunter X Hunter" - scoped slots

Hunter X Hunter "Hunter x Hunter"
2017.02 - 2.2 "Initial D" - SSR supports route-based code splitting

Initial D "Initial D"
2017.04 - 2.3 "JoJo" - SSR supports route-based resource preloading

"JOJO's Bizarre Adventure"

Implement Bundle Rendering, analyze the information packaged by Webpack, and analyze which source code modules are used in each route (code block) through the manifest file generated by Webpack packaging to realize resource preloading
2017.06 - 2.4 "Kill la Kill" - SSR full async component support + partially optimized SSR compilation output

KILL la KILL "Kill the Girl"

The implementation process of SSR is: Compile the template into a Virtual DOM rendering function -> Generate Virtual DOM -> Virtual DOM String HTML, this process is relatively expensive.

Part of the optimization done here is to let the static part skip this process. At compile time, the static part is analyzed, and this part uses strings directly, so that part is a string and part is Virtual DOM, which optimizes part of the overhead.

Although this optimizes part of the overhead, it still cannot completely offset the cost of Virtual DOM in server-side rendering. Now Vue3 does it
2018.01-08 - View CLI 3.0
- Highly integrated toolchain for SPA
- Extending the boundaries of the framework further
  - "The toolchain is also part of the framework" (the idea at the time, looking back is questionable)
    
    What I thought at the time was to do as many things as possible for users, but looking back now, there are some problems. Because the development of the front-end tool chain system is very fast, and the tool chains are all cross-framework, it is actually unrealistic to try to eat all the tool chains in the scope of the framework, which increases the maintenance cost a lot. Moreover, when the community tool chain changes, corresponding adjustments need to be made, and the maintenance cost is very high. Vite solves this problem very well.

4.2 Design focus

Design Focus of Phase 2.0

The second complete rewrite, code structure improvement
Introduced the compilation process of compiling templates into Virtual DOM rendering functions

At the beginning, there was template compilation, which was compiled into a Virtual DOM rendering function. At that time, there was only this compilation strategy.
Server-side rendering (SSR) based on Virtual DOM

Compile into Virtual DOM rendering function -> generate Virtual DOM -> Virtual DOM stringify HTML

It is exactly the same as React's server-side rendering
Cross-end rendering based on Virtual DOM (Weex, NativeScript)
Combining with the type system
- Use Flow in source code
  
  Looking at it now, with the benefit of hindsight, the choice was indeed wrong. It was also because the advantages of TypeScript were not as good as Flow at that time.
- Manual TypeScript type definitions

4.3 Typical Cases

A classic demo is provided in the community, vue-hackernews-2.0

webpack + SFC + Vue Router + Vuex + SSR
The first demo that fully demonstrates the Vue 2 SSR architecture
A testing platform for Vue 2 SSR-related functions
Inspired upper-level SSR frameworks such as Nuxt

5. Compile/Runtime Hybrid Phase

Compiler/Runtime Hybrid Phase (3.x)

Although 2.x also introduces compilation, the combination between 2.x compilation and runtime is very shallow, that is to say, after the compiler compiles the Virtual DOM rendering function, it stops here. In fact, there is not much concept of how it is, and the runtime has no concept for the compiler. Although the two sides are relatively separated and independent, the corresponding optimizeable space is actually wasted.

However, both the compiler and the runtime are part of the framework, and they are themselves coupled. Under the premise of this coupling, you can find a way to let the compiler provide more information for the runtime, so that the runtime knows that the compiler will provide these messages. Under such a premise, a lot of optimization can be done, which is actually the trend of many frameworks, and React is the only framework that does not go in this direction. But in fact, the upper-level frameworks of React, such as Nextjs and React Forget , are slowly moving in this direction in the end. Other frameworks, such as Sevlte Solid.js, are a mixed solution of compiling and running.

You may not be very familiar with React Forget. This is a magical thing that can automatically add React.memo introduced by Xuan Huang at React Conf 2021

5.1 Phase development

2018.09 - Remote announcement of Vue 3 development plans at Vue.js London

When the Vue3 horoscope has not been written yet
2018.09 - 2019.05 - Research phase
2019.05 - A new strategy to optimize VDOM performance based on compilation

Integration of compile time and runtime, such as blockTree, patchFlag (bit operation for node update)

You may not be very clear about these nouns. It can be simply understood as a lot of marking and integration during compilation, so that you can do corresponding processing when you get the information at runtime.
2019.08 - Composition API RFC

At the beginning, we also discussed the Class-based API. Since the Class API has a strong dependence on the ES Decorator (decorator), there is no way to provide a good development experience without the Decorator. At that time, the Decorator was still in Stage 2, and it had passed I have rewritten and modified it several times, and I have no idea what kind of rewriting and development it will experience in the future, and I am not sure whether it will become a standard, so I dare not take such a big risk based on a proposal that I don’t know how it will develop. So this is also an opportunity to implement API ideas based on function composition

Significance of the Composition API
- Vue's use cases are increasingly entering the enterprise, large-scale project space
- The Options API has a clear upper bound on scalability
- more friendly to the type system
  
  At that time, for the type support of the Options API, we actually did very complicated type gymnastics internally. Even at that time, the TypeScript team launched it to support the type deduction of Vue2 to some extent ThisType. Functions are pretty smooth with types
- Provides flexible and maintainable logic combination/reuse
2020.01 - 3.0 alpha
2020.04 - 3.0 beta - fully optimized SSR compilation output

Vue2 is part, vue3 is fully optimized, all string splicing can be made into string splicing
2020.04 - 2021.02 - Bypass the development of Vite

The meaning of Vite
- Greatly optimize the development experience
- Detach the toolchain responsibilities that are not coupled with the framework and hand it over to a larger community for maintenance
  
  Vite is also widely used in ecology other than Vue and has become a shared tool, so it has gained a very active community, including from Sevlet, React community
- Reduce the framework scope and maintenance burden of Vue itself
  - View CLI -> create-view
  When integrating, it is no longer using things that are strongly coupled with Vue to integrate, and the integration of third-party tools is to use Vite to integrate
2020.09 - 3.0 "One Piece" - stable release

One Piece

Just the stable version of the core functionality
2021.06 - 3.1 Migration Build

Compatible with the syntax of vue2, which can better facilitate the upgrade of vue2 users
2021.08 - 3.2 <script setup>

At this point, the combined API is more comfortable to use
2022.01 - Vue 3 switched to default version

Switch vue3 to the default version
2022.02 - Brand new Vue 3 documentation

5.2 Design focus

3.x The initial focus of refactoring

Improve minimum browser support requirements, use modern ES syntax and features
Improve overall performance
Improved type system integration
Improve scalability in large applications

Vue2 is mostly used in small and medium applications, and gradually used in large applications

The original idea was to release the version that required the ES2015 environment first, and then adapt to IE, etc., but found that the demand for IE was getting lower and lower, so it was completely removed. Later, Microsoft announced that it would no longer maintain IE. , so it is also a good time

Is this prescient? invincible

5.3 Framework scope

The framework categories currently defined by Vue 3

Core (runtime + compiler)
document
Toolchain (create-vue)
SPA Routing (Vue Router)
State Management (Pinia)
Browser Development Tools (vue-devtools)
IDE support (Vollar)

template type deduction
TypeScript support (vue-tsc)

Wrap a layer of vue-tsc on tsc, so that ordinary ts files and vue SFC can be detected at the same time
Static analysis (eslint-plugin-vue)
Unit Tests (@vue/test-utils)

6. Status, trends and outlook

6.1 Status

The community is still in transition from 2 -> 3
2.7, released in June 2022, further bridges the gap between 2 and 3 (backport)
Based on current npm data:
- More than 30% of projects are using Vue 3
- About 25% are using 2.7
  
  It’s okay if you don’t upgrade, vue2 is also a very stable product
- More than half of projects can use Composition API and<script setup>

6.2 Trends

Evolution to Compile/Runtime Mixed Mode

Same template, different compilation output
- Browser: highly optimized Virtual DOM rendering function
- SSR: buffer + string concatenation
  
  Push the string into a buffer to support asynchronous
- Future: Vapor mode (no rendering code for Virtual DOM)
  
  Compile templates into rendering code that does not rely on Virtual DOM for better performance
Syntactic sugar for single-file components
- <script setup>
- CSS v-bind()
- Reactivity Transform
  
  Not yet fully implemented, still in the experimental stage
- vue macros
  
  It will be mentioned later in the article, here we reserve

6.3 Outlook

The next phases will prioritize API stability
Emphasis will be placed on improvements that don't affect usage
No plans to introduce features like React Server Components that require strong binding to the server
short term
- Reactivity Transform / Suspense stabilization
- SSR hydration improvements (lazy / on-demand / server-only)
  
  3.3 version will be implemented (lazy hydration, on-demand hydration)
medium to long term

Vapor mode (template compilation strategy inspired by Solid)
- Exactly the same template/component syntax
- Output no longer depends on the Virtual DOM runtime
- Extreme performance and memory usage
- Zero-cost component abstraction
- Embed seamlessly in existing applications (compatible with all VDOM-based third-party libraries)
- Or: enable Vapor-only (not compatible with VDOM)
- More information to be announced next year