Vuejs 3.0 was finally released in the early hours of September 19, 2020 Beijing time, codenamed One Piece

Vuejs Release 3.0 v3.0.0 One Piece

Vue 3.0 release

Today, we are proud to announce the official release of vue.js 3.0 “One Piece”. The new major release of the framework provides improved performance, a smaller bundle size, better TypeScript integration, new apis for handling large-scale use cases, and a solid foundation for future long-term iterations of the framework.

Version 3.0 represents more than two years of development effort, including 30+ RFC, more than 2,600 submissions, 628 PR from 99 contributors, and extensive development and documentation work outside the core repository. We would like to express our deepest gratitude to our team members, contributors for their pull requests, sponsors and supporters for their financial support, and the wider community for participating in our design discussions and providing feedback for the pre-release. Vue is a standalone project, created for and sustained by the community, and Vue 3.0 would not have been possible without your consistent support.

## Further advance the concept of “progressive framework”.

Vue had a simple mission from the beginning: to be an approachable framework that anyone could learn quickly. As our user base grows, so does the scope of the framework to meet the growing needs. Over time, it evolved into what we call an “incremental framework” : a framework that can be learned and adopted incrementally, while providing ongoing support as users respond to more and more requirements scenarios.

Today, with more than 1.3 million users worldwide *, we see Vue being used in a variety of scenarios, from adding interactivity on traditional server-rendered pages to complete single-page applications with hundreds of components. Vue 3 takes this flexibility even further.

## Layer internal modules

The Vue 3.0 core can still be used with a simple

These modules also expose the underlying APIS, unlocking many advanced use cases.

  • The compiler supports custom AST transformations for build-time customization (such as build-time I18N).

  • The core runtime provides a level 1 API for creating custom renderers for different rendering targets, such as native mobile, WebGL, or terminal. The default DOM renderer is also built using the same API.

  • The functions exported by the @vue/reactivity module have direct access to vue’s reactive system and can be used as a separate package. It can be paired with other template solutions, such as lit-HTML, even in non-UI scenarios.

A new API to address scaling issues

In Vue 3, the object-based 2.x API is largely unchanged. However, 3.0 also introduces Composition APIS, a new set of apis designed to address the pain points of Vue in large-scale applications. The composition API builds on the reactive API, enabling logical composition and reuse similar to the React hook, more flexible code organization patterns and more reliable type reasoning than the 2.x object-based API.

The Composition API can also be used with Vue 2.x via the @vue/ composition-API plug-in, and there are already libraries of Composition API utilities for Vue 2 and 3 (e.g. Vueuse, vue-Composable).

Performance improvements

Vue 3 has significant performance improvements compared to Vue 2 in bundle size (41% less tree shaking), initial rendering (55% faster), updates (133% faster), and memory usage (54% less).

In Vue 3, we took a “Compiler-informed virtual DOM” approach: the template compiler performs aggressive optimizations and generates render function code to promote static content, leave runtime hints for binding types, and, most importantly, flatten dynamic nodes within the template to reduce run-time traversal costs. As a result, users can get the best of both worlds: compiler optimized performance from templates, or direct control through manual rendering functions when the use case requires it.

Improved TypeScript integration

Vue 3’s code base is written in TypeScript and has auto-generated, tested, and bundled type definitions, so they are always up to date. The Composition API handles type inference well. Vetur is our official VSCode extension that now supports template expressions and props type checking with Vue 3’s improved internal typing capabilities. Oh, and Vue 3 has full TSX support for typing, if you like.

The experimental features

We propose two new features for single-file components (SFC, i.e..vue files) :

  • <script setup>: Syntax sugar for using the Composition API in SFC

  • <style vars>: State drives CSS variables in a single file component

These features are implemented and available in Vue 3.0, but are provided only for the purpose of gathering feedback. They will remain experimental until the RFC is merged.

We’ve also implemented a currently unexposed

component that allows waiting for nested asynchronous dependencies (asynchronous components or components with setup()) on initial render or branch switches. We are testing and iterating on this functionality with the Nuxt.js team (Nuxt 3 is coming soon) and will most likely solidify it in version 3.1.

Release the process in phases

The release of Vue 3.0 marks the framework’s full readiness. While some framework subprojects may still need further work to reach a stable state (specifically routers and Vuex integration in DevTools), we felt it was appropriate to start new green projects with Vue 3 today. Library authors are also encouraged to start upgrading your projects to support Vue 3.

Consult the Vue 3 Toolkit guide for details on all framework subprojects.

Migration and IE11 support

Due to time constraints, we have postponed the migration version (V3 version with V2-compatible behavior + migration warning) and THE IE11 version and plan to focus on them in q4 2020. Therefore, users planning to migrate existing V2 applications or requesting IE11 support should be aware of these limitations at this time.

The next step

In the short term after launch, we will focus on:

  • The migration version

  • IE11 support

  • Router and Vuex integration in the new DevTools

  • Further improvements to template type inference in Vetur

For now, the documentation site for Vue 3 and V3 projects, the GitHub branch and the NPM Dist TAB will remain in the next state. This means that NPM Install Vue will still install vue 2.x and NPM install vue@next will install Vue 3. We plan to switch all document links, branches, and Dist tabs to the default 3.0 by the end of 2020.

In the meantime, we have begun planning for 2.7, which will be the last planned secondary release of the 2.x release. 2.7 Compatibility improvements from V3 will be backported and warnings will be issued about the use of removed/changed APIS in V3 to aid potential migration. We plan to develop 2.7 in the first quarter of 2021, which will go straight to LTS upon release with an estimated 18 months of maintenance.

Give it a try

To learn more about Vue 3.0, visit our new documentation site. If you are an existing Vue 2.x user, go directly to the Migration Guide.

  • Google reports weekly active users of the Vue Devtools Chrome extension.

  • (Also: Vue 3 official Chinese document warehouse is here)

Note: the original from [the scarecrow.net] (www.cnblogs.com/terrylin/p/)…