preface

Hello everyone, I am the village head, welcome to pay attention to my public number village head school front. Recently, WE are doing a live broadcast together with DevUI team to share the construction of Vue DevUI open source component library. Welcome to pay attention to our live broadcast and give more support to the project STAR!

Today, I participated in the “VUE Ecology Special” organized by the front-end early chat. I am ready to write a wave of sharing for everyone to learn. There are 4 topics in the morning: Volar development, building platform component development and maintenance, UVU sharing vUE ecological progress and outlook, little sister sharing Gogocode migration old project. A lot of dry goods, here to share a small right to bring some new news, feel and we write code.

Why is it not the default version?

Very quickly! Had to wait for most of the ecology to catch up, and apparently it’s ready now.

Explain the reasons for the “soft landing” in more detail:

  • Vue3 takes time to become stable
  • Ecology takes time to catch up
  • Vue3 needs to be polished before it becomes the default

Cause of major version upgrade

  • Correct architectural design
  • Generate new base functionality
  • Get rid of technical debt

Some factors to consider for a large release upgrade

  • Backward compatibility
  • Easy to upgrade
  • Implementation and maintenance costs
  • To improve the degree of

Vue3 how to choose between cost and improvement

  • The main improvement

The vuE3 completion is here, and the turning point is coming

Actually, a lot of time was spent on Vite, the new development ecosystem

There is no need to support IE11 in the US and Europe

Vue3 Ecology has caught up!

  • Nuxt3: This is a strong recommendation, I used to use nuxT2 also feel 6, ready to do a wave of sharing, welcome everyone to follow my B station
  • VueUse: Library of tools for the Vue3 Composition API
  • Vue3 compatible component library
  • Ionic and other mobile frameworks

Vue3 continues to get better

  • script setupMake it official, use it now!
  • Style V-bind became an official feature
  • DefineCustomElement: Component libraries can be written in Vue and the output is a native component that can be used in other frameworks and can be used with a micro front end
  • Reactivity performance improves significantly, especially in larger applications
  • EffectScope API: For advanced applications such as VueUse and Penia, pinia is highly recommended by the state management library
  • Ref conversion
  • Props conversion

Ref Transform

There’s a lot to be said for this, a couple of pages, and a code demo, so you’re taking this seriously, but isn’t there going to be a lot of debate about this syntax?

Demonstrates the $syntax sugar, with which you can forget the. Value

Example $$use, usually for hooks

Structural props conversion

Another development pain point is about the mental burden caused by attribute deconstruction, which can be solved by using props Transform.

For example, after the properties are deconstructed in the following code, you can even set default values, alias values, and REST expansion, and you can see that Foo is a responsive, showy batch.

Bridge received vue2

Let everyone enjoy the development experience of VUE3 in VUE2:

  • Migration build version: @vue/compat, a build version of VUe3 that provides configurable VUE2 compatibility behavior
  • Vue-demi: Write a common library for vue2 and vue3
  • Viet-plugin-vue2: vue2 is written in vite
  • Unplugin-script-setup-vue2: script setup is used in vue2
  • Vue 2.7: VUE2 in a vuE3 shell

A new document

  • Diablo mode
  • Based on the vitepress
  • Upgrade tips and best practices: Recommend the latest features and don’t miss anything new
  • Reorganize your learning route

The new website

The official website will also be updated, including numerous rewritten wizards, arbitrary switching between old and new apis, new cases, new modules, and more

Feel free to switch between the Options API and composition API

What you see is what you get!

Final change summary

  • The new document will be on its way

  • Vue3 is the default on the official website

  • NPM Latest tag points to vue3

  • Github will split up

    • Keep issue links
    • Vue-next will be renamed core

A small accident

Uvu broadcast live in the lobby of a hotel in Singapore, afraid that someone would come and wear a mask. When I recovered, I found that I had finished speaking, especially the big moment collapsed. Obviously, the second time I spoke speeded up the speed, so that we listened to it a little bit less cool, but I still thank him again for sharing, and WISH him a happy life in Singapore!

Q&A session

Will VUe2 still be maintained?

2.7 will be the last minor version of VUe2, which will be maintained for 18 months before being fully implemented

Will there be any changes to VUE3?

It is mainly to further optimize the client performance under SSR

How does vuE2 upgrade VUE3

There are European and American share, we search. I have a share to do this this afternoon.

How does Singapore feel?

Eat many things, casual point, very happy!

Vite future planning

Stable at present, no major changes, stable SSR achieved; There are a lot of low-level ecologies coming up based on Vite, and vite will do things that will help the front-end ecologies.

Will Pinia replace Vuex

We are all members of the core team, and the result of the discussion is that the future will look like Pinia. New things are written in Pinia. If you develop a new project, if you use TS, WE recommend pinia.

How do you evaluate freelancing

Freedom is ideal, cool, destiny in their own hands; At the same time, the pressure on their own, no company backstop, choose to be prepared to bear these.

Write in the last

Recently, I did a live broadcast with the DevUI team to share with you how Vue DevUI participated in the construction of open source and even developed its own component library. If you are interested, you can watch and learn from the past.

  1. Vue DevUI Open-source Guide 01: Submit my first PR
  2. Vue DevUI Open Source Guide 02: Implement a Tree component that can render multiple nodes
  3. Vue DevUI Open Source Guide 03: How to add expansion/collapse to tree components
  4. Vue DevUI Open Source Guide 04: Build a Vue3 component library for TypeScript/JSX using Vite
  5. Vue DevUI Open Source Guide 05: Add VitePress documentation system to Vue3 component library
  6. Vue DevUI Open Source Guide 06: CLI scaffolding in the open source component library, no more worry about rework and messy code style!

This series will continue to be done, welcome to follow my official account, or add my wechat kkb_CUNzhang, add group discussion and study, each live broadcast will be notified within the group, live broadcast documents will also be issued within the group, not miss every live broadcast!