VueConf China 2021 "Vue3 Ecological Progress-You Yuxi" Reaction

delicious value: 🌟🌟🌟🌟🌟

taste: iron pan stewed pork ribs

The article tries to restore the particularly large live content in graphic form as much as possible (for you to have a better viewing experience, Ouba added some related links). Students who haven’t watched it can come with everyone to come to a wave of graphic reactions, and those who have watched it can also sort out the key content again, stop talking nonsense, let’s get started!

some data

The above data is as of April this year. Compared with the same period last year, the growth is considerable, and the entire front-end development market is still expanding.

2020.09.18 Vue 3.0 One Piece released

Vue 3.0

After the release of Vue3, the official did not force all users to upgrade to Vue3, because the ecology takes time, and the tools, peripherals and libraries in the ecology need time to be compatible, and some new uses of Vue3 also take time to settle.

What are you mainly busy with after the release?

Vue Router 4.0 is stable

github.com/posva

Vuex 4.0 is stable

github.com/kiaking

(This newly joined old man is reasonable. Leopard print is a bit handsome.)

Vue Router and Vuex are already part of the Vue framework, and their stability is very important.

Vue 3 ecosystem is gradually catching up

The community ecological library is gradually catching up.

Development experience improvement

Build tool Vite

Vite official Chinese document

You know what you need to know, but slowly understand what you don't know. - Jiang Yunsheng

The main difference between vue-cli and Vite's is: vue-cli is based on webpack secondary development, vue-cli covers a wide range, and the maintenance cost is very high. Some common configurations have become complicated.

Vite will inherit the advantages of vue-cli and choose a more concise route. The plug-in mechanism is based on Rollup's API, which is very simple and intuitive. Compared to Webpack, Rollup's plugins are much easier to write and easier to understand.

The Vite plug-in can also support custom development servers, middleware, and fine adjustments to the hot update behavior.

`Vite or vue-cli ？`

If an existing project is strongly dependent on Webpack, there may not be a simple way to migrate it.

`VitePress static station generator based on Vue3 + Vite`

It can be understood as replacing Vue2 with Vue3 and Webpack with Vite, and you get VitePress.

The third point above, React's MDX also has the same problem, but VitePress solves it.

`More optimizations in the compilation phase of single-file components`

New script setup (without ref sugar)

As long as your script tag has a setup attribute, the variables you declare can be used directly in the template.

Moreover, setup can help us concise a lot of code and improve coding experience.

For example, we have two components, Comp.vue and App.vue.

Under setup, App can be used directly after introducing the Comp component without registration.

Compare:

`<style> dynamic variable injection`

SFC style CSS variable injection (new edition)

After clicking the make it green button:

The principle is also very simple. Use native CSS variables to bind dynamic content, and leave the rest to the browser, so the runtime overhead is very small. It is a very cost-effective feature.

`Vue Devtools beta channel(6.0)`

There is no need to switch back and forth between the two versions of Vue Devtools. The new Vue Devtools supports Vue2/3 at the same time.

This picture is a screenshot taken during development. It is a bit vague, but it doesn't matter. Roughly we can see from the figure:

The performance debugging panel can help us find out which components are particularly slow to render, as well as mouse events, keyboard events, component events, component re-rendering, and so on.

The most important thing is that this Timeline supports third-party plug-ins to extend it.

`Better IDE/TS support`

Volar is the official VS Code plugin in the future, which will replace Vetur (historical burden).

As shown in the figure above, Volar provides almost the same development experience as TSX, and can perform template type checking.

`IDE support plan`

In the future, some important functions of Vetur and some new explorations will be integrated into Volar.

At the same time, the author of Volar also developed vue-tsc, which supports simultaneous checking of TS files and TS type errors in Vue files on CI. The internal implementation is the same as Volar.

Of course, it will also officially cooperate with other editors to provide support.

`IE11 is no longer supported`

Microsoft just issued a statement that IE11 will retire in June 2022, showing its determination to promote IE users to switch to Edge.

`Vue3 + Vite = Modern by Default`

`Vue3 migration build`

Another major announcement recently, the overall content is relatively large, it is expected to be released in 3.1.

Vue3 upgraded version: Basically, it is Vue3, and the upper layer is compatible with Vue2 behavior. Most of the functions can be fully supported.

You can choose to run the entire application in Vue2 mode, and then run certain individual components in Vue3 mode.

It can also be the other way around. The entire application runs in Vue3 mode, and then a few old Vue2 components are transplanted, and then slowly changed to Vue3 mode.

As much as possible to provide everyone with compatible flexibility.

The current document is in the vue-compat warehouse. Public API will be as compatible as possible, but some private APIs are indeed not completely compatible. There is a detailed support list in the document.

And provides a detailed step by step process vue-hackernews-2.0

`3.2`

Because the above compatible version has been moved to 3.1, the original 3.1 content will be moved to 3.2, but it is expected to be released soon, and the specific details will be disclosed at the time of release.

`If you absolutely need IE11 support, please wait for 2.7`

It is expected to be done in Q3 2021.

I hope that after the release of Q3 Vue2.7, the entire upgrade process from Vue2 to Vue3 will become smoother. You can switch to Vue2.7 based on Vite first, Compsition API will be directly built-in, and then switch to Vue3 will be easier.

`Vue3 becomes the default version by end of Q2 2021`

At the end of June 2021, the default installation of npm will point to Vue3, and the document will also point to the Vue3 document by default. I hope that new users will use Vue3 as the benchmark.

This article has been included in the front-end canteen warehouse of the same name Github github.com/Geekhyt , welcome to the canteen, if you think the food and wine are delicious, a Star is a great encouragement to the canteen owner.

`❤️Love three combos`

1. If you think the food and drink in the cafeteria are still in line with your appetite, just like your support. Your is my biggest motivation.

2. Follow the front-end cafeteria of the public eat every meal!

3. Like, comment, forward === reminder!