Delicious value: 🌟🌟🌟🌟🌟

Taste: Stewed ribs in a wok

This article tries to recreate the live content of UVU as much as possible in graphic form (oba has added some relevant links for you to have a better viewing experience). For those of you who haven’t watched it yet, take a look at the main points of the Reaction and let’s get started.

Some of the data

The numbers are through April of this year, and the year-over-year growth is significant, as the overall front-end market continues to expand.

2020.09.18 Release Vue 3.0 One Piece

  • Vue 3.0

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

What have you been working on since the release?

Vue Router 4.0 is stable

  • github.com/posva

Vuex 4.0 is stable

  • github.com/kiaking

(The new guy, to be fair, leopard is kind of cute.)

Vue Router and Vuex have long been part of the Vue framework, and their stability is very important.

Vue 3 Ecology is catching up

Community ecobanks are catching up.

  • Quasar
  • Element Plus
  • And Design Vue
  • Vuetify
  • Nuxt 3

Development experience improvement

Build tool Vite

  • Vite official Chinese document

I know what I need to know, and I know what I don’t know. – Jiang Yunsheng

The main differences between VUE-CLI and Vite are as follows: Vue-CLI is based on webpack secondary development. Vue-cli covers a wide range and has high maintenance costs. Some common configurations become complicated.

Vite will inherit the advantages of VUe-CLI and choose a more concise route. The plugin mechanism is based on the Rollup API, which is very simple and intuitive. Rollup plug-ins are much easier to write and understand than Webpack.

The Vite plugin also supports custom development servers, middleware, and fine-tuning of hot update behavior.

Vite or vue – cli?

Existing projects that rely heavily on Webpack may not be easily migrated.

VitePress static station generator based on Vue3 + Vite

Change Vue2 to Vue3 and Webpack to Vite, and you get VitePress.

The React MDX has the same problem, but VitePress fixes it.

More optimizations during compilation of single-file components

  • New script setup (without ref sugar)

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

Also, Setup can help simplify a lot of code and improve the coding experience.

For example, we have comp. vue and app. vue.

Under Setup, Comp components can be used directly by App without registration.

Compare:

<style>Dynamic variable injection

  • SFC style CSS variable injection (new edition)

After clicking the Make it Green button:

The principle is simple: use native CSS variables, bind the dynamic content, and leave the rest to the browser, so the runtime overhead is minimal. It’s a very cost-effective feature.

Vue Devtools beta channel (6.0)

No need to switch back and forth between Vue Devtools versions. The new Vue Devtools also supports VE2 2/3.

This is a screenshot from development, and it’s a little blurry, but that’s okay. Roughly, we can see from the picture:

The performance debug panel helps us figure out which component rendering is particularly slow, mouse events, keyboard events, component events, component re-rendering, etc.

Crucially, the Timeline allows third-party plug-ins to extend it.

Better IDE/TS support

Volar is a future official VS Code plugin that will replace Vetur.

As shown above, Volar provides almost the same development experience as TSX, allowing for template type checking.

IDE Support plan

Some of Vetur’s key features and new exploration will be integrated into Volar in the future.

At the same time, the author of Volar also developed vuE-TSC, on CI support can check TS files and VUE files in the TS type error, internal implementation suitable for Volar.

Of course, there will be official cooperation with other editors to provide support.

Internet Explorer 11 is no longer supported

Microsoft has just announced that Internet Explorer 11 will retire in June 2022, showing its determination to push IE users to switch to Edge.

  • Proposal for dropping ie11 support in Vue 3
  • Drop IE11 support plan for Vue 3

Vue3 + Vite = Modern by Default

Vue3 migration build

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

Vue3 upgrade: The bottom is Vue3, the top is compatible with Vue2 behavior. Most of the features are fully supported.

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

Alternatively, the entire application can run in Vue3 mode, porting a few old Vue2 components, and gradually switching to Vue3 mode.

As much as possible to provide everyone with compatible flexibility.

The document is currently in the Vue-Compat repository. Public apis are as compatible as possible, but some private apis are not completely compatible. A detailed list of support is available in the documentation.

Vue-hackernews-2.0 provides a detailed step by Step process

3.2

The original 3.1 content will be moved to 3.2 as the compatible version has been moved to 3.1, but it is expected to be released soon. Details will be revealed during the release.

If you absolutely need IE11 support, please wait for 2.7

It is expected to be done in Q3 2021.

Hopefully, the whole Vue2 to Vue3 upgrade process will be smoother after Q3 Vue2.7 is released. You can switch to Vue2.7 based on Vite, the Compsition API is built in, and switching to Vue3 is easier.

Vue3 becomes the default version by end of Q2 2021

– NPM installation will default to Vue3 by the end of June 2021, documentation will default to Vue3 documentation, hopefully new users will benchmark against Vue3.

Github github.com/Geekhyt, welcome to the canteen, if you think the food is delicious, a Star is a great encouragement to the canteen owner.

❤️ Love triple punch

1. If you think the food and drinks in the canteen are ok with you, please give me a thumbs-up. Your thumbs-up is my biggest motivation.

2. Pay attention to the front canteen of the public account and eat every meal!

3. Like, comment, forward === urge more!