Watch the summary notes of Vue3 global press conference, please kindly note the limited translation level. Finally, there is a summary of learning materials.

Let’s start with a wave of my Brother Yang’s video to popularize Vue3 knowledge

Vue3 light series of introductory video video address: www.bilibili.com/video/BV1Wh… directory

  • P1 01- Fast start

www.bilibili.com/video/BV1Wh…

  • P2 02- Teleport

www.bilibili.com/video/BV1Wh…

  • P03-fragments and Emits options

www.bilibili.com/video/BV1Wh…

  • P404 – Custom renderer

www.bilibili.com/video/BV1Wh…

  • P5 05- Global API changed to instance methods

www.bilibili.com/video/BV1Wh…

  • P606-api can do tree shaking optimization

www.bilibili.com/video/BV1Wh…

  • P7 07-V-Model changes in use

www.bilibili.com/video/BV1Wh…

  • P808 – Render function API changes

www.bilibili.com/video/BV1Wh…

  • P909 – Functional component use changes

www.bilibili.com/video/BV1Wh…

  • P10 10- Asynchronous component use changes

www.bilibili.com/video/BV1Wh…

  • P11 11-data option and custom component whitelist

www.bilibili.com/video/BV1Wh…

  • P12 12- Custom instruction API is consistent with component

www.bilibili.com/video/BV1Wh…

  • P13 13-transition class name change, Watch no longer supports point splitting path

www.bilibili.com/video/BV1Wh…

  • P14 14- Remove apis such as event API and filter

www.bilibili.com/video/BV1Wh…

  • P15 15- A case through vuE3 core features

www.bilibili.com/video/BV1Wh…

  • P16 16- Componentized combat

www.bilibili.com/video/BV1Wh…

Future updates • Router-next • VUex-Next • TS + VUE3 • Vite • Enterprise-level projects

Review the creation history of Vue3

Phase 1: Prototype

  • 2018/02/26 – The very fist idea about Vue3
    • Imagine what the next major version of Vue should look like
  • 2018/09/12 – First working prototype
    • How do you organize your code
    • Try using Typescript
    • Try using Monorepo
    • Try something new and new

    Milestone: Mini VDOM runtime environment + standalone proxy-based responsive API

  • 2018/09/19 – Graduated prototype into current vue-next repo
  • Submit the graduating class prototype to Git repository
  • 2018/09.21 – First Vue3 announcement at VUe.js London

Phase 2: Exploration

  • Late 2018 to early 2019 to try all kinds of new things is good
    • Classify API – Class style API
    • Whether TypeScript type inference is useful
    • Reactive Hooks
    • Time Slicing
  • 2019/01/04 Established the RFC process
  • 2019/02/27 Class API RFC Introduces the RFC version of the Class style API
  • 2019/03~2019/05 Researching new rendering strategy

Develop new rendering strategies

Phase 3: Pivot Core Task

  • 2019/05/21 Drop the Class API
  • 2019 05 ~ 06 Re-writing core Rendering Logic
    • patch flag
    • block tree optimizations
  • 2019/06/07 Function API RFC
  • 2019/06~08 Composition API design/ feedback
  • 2019/08/16 Composition API RFC

Phase 4: Feature Parity – Feature Smoothing

Compatible with most Vue2.0 apis

  • X Options API support Vue2.0 definition style API New compiler implementation

  • 2019/10 v-model

  • 2017/11 Transition System Animation Transition system

  • 2019/12 Toolling

    • SFC single file component
    • HMR compiler hot replacement module

  • 3.00 alpha 2020/01/02. 1

  • 01 ~ 04 2020 Server-side Rendering and Rendering system

Improve Stability and ecological construction

2020/04/16 3.0.0-beta.1 2020-05 ~ 06 Dogfooding Via Vite Internal testing Vite – VitePress VitePress project – Working on V3 support in Sub Projects support v3 Subproject 2020/06/17 3.0.0-rC1

New features of Vue3

  • Enhance maintainability

    • TypeScript + Modularized Internals is written in TS and more modular core code

  • Performance improvement

    • Proxy-based Reactivity System proxy-based Reactivity System
    • Compiler- Informed Virtual DOM & SSR compiles inferred Virtual DOM and server rendering

  • Smaller volume

    • Tree-shaking tailoring on demand
    • Compile-time flags

  • Scales are better

  • Better DX New Single-file Component Improvements New single-file Component improvements

Modularized Internals Modular cores

Vue is no longer a big black box,

  • Independent response
  • Abstract renderers are render target-independent – support for custom renderers (Dom, Canvas, terminal display).
  • Extensibility means that the compiler can extend the compiler by implementing compiler plug-ins.

Unlock Advanced Features

  • I18n is internationalized at compile time
  • Custom renderers such as native App, WebGL, terminal display
  • Independent responsive implementation package – together with external templating systems to compose new applications

TypeScript support

  • Source code development – Internal
    • Better editor support – refactoring code is easier and safer
    • Improve contributor submission confidence
  • Service authoring – External
    • To meet the growing demand of TS Vue users
    • Automatic type inference – consistency checking reduces maintenance costs

Composition API

  • Facilitate complex business logic use cases
  • Naturally complete TS support
  • Designed to encapsulate and decouple organizational business logic
  • Alternative mixins blending schemes

Speak so wave is simply advertising words 😝

Compiler-informed VirtualDom Compiler- inferred VirtualDom – static promotion

Static improvement through compilation of inferential virtual Dom is a very significant performance improvement for Vue3.0. At compile time it is easy to determine which parts of the view template are dynamic and which are static. However, it is difficult to do this using pure JS rendering functions or JSX syntax. So Vue3 is very bold and creative in the compiler analysis and optimization, only retain the necessary dynamic part of the rendering function, reduce the runtime computation.

Compiler-informed SSR compiles inferred server segment rendering

  • Static promoted content is pre-converted to a pure string
  • Due to the fact that only dynamic nodes are activated in client hydration activation, the performance is significantly improved.

Tree-shaking- Aware Global API The global API can be tailored on demand

There is a picture and there is a truth, but the compiler is smaller.

New single-file component feature

  • <script setup>Syntactic sugar for composite apis

Export binding values directly (behavior functions, objects, reactive objects)

  • The

  • Perfect support for Typescript syntax

Suspense features – Asynchronous dependencies

Third, the official launch

  • 3.0 will be stable but the version number will remain @next for now – to give the community more time to respond
  • The sub-project is currently in beta and will be released soon

Trying Vue 3 Today

V3. vuejs.org official document

V3.cn.vuejs.org Official Chinese document

Migration Guide Migration Guide

Migrate official Chinese documents

Village head Yang’s Vue3.0 relocated private house dishes

Understand Vue3.0

Progressive hand tapping Vue3.0 framework