Vuejs 3.0, codenamed One Piece, was finally released in the early hours of September 19, 2020 in Beijing. The full release has a development cycle of more than two years. According to the official, while some subprojects of the framework may still need further development to reach a stable state (notably routing and Vuex integration in DevTools), now is still the right time to start new projects with Vue 3.
If there are people who don’t know the new system or make fun of it

“It’s built like spaghetti, even copied React.”

I can only say that you really do not understand 3.0 Vue is good? In this article, we’ve put together a list of the five highlights of the new system.

** If you happen to have a Vue project that you are working on, and you upgrade and refactor it with a new version, won’t the final KPI feel good? **

01 Separating internal modules

The Vue3.0 core still passes through a simple. The new architecture provides better maintainability for source code and allows end users to cut runtime volume in half in tree-shaking form.

** Advanced algorithms **

  • The compiler supports custom AST transformations for build-time customization (for example, i18N operations at build-time)

  • The core runtime provides a set of apis for custom containers for different rendering targets such as Native Moile, WebGL, or terminal. The default DOM renderer is also built using this set of apis.

  • @vue/ reActivity module export functions, you can directly access the vue responsive system. And can be used as a separate package. It can be paired with other module solutions (such as lit-HTML), even in non-UI scenarios.

02 A new API for solving scale problems

In Vue 3.0, the object-based 2.x API remains largely unchanged and a new set of apis, Called Composition API, is introduced. Composition API is designed to address the pain points of Vue in large-scale application scenarios. Built on a responsive API, it implements logic composition and reuse similar to React Hook. Compared with 2.x object-based API, it has a more flexible code organization mode and more reliable type inference capability.

The Composition API also provides a Vue 2.x version that can be used in projects via the ** ‘@vue/composition-api’ ** plug-in, There are already libraries of utilities for the Composition API for Vue 2 and Vue 3.
** For example, **

It happens a lot at work: as the business gets more complex, the amount of code gets bigger and bigger. Because the codes of related businesses need to follow the configuration of option to write to a specific area, the subsequent maintenance is very complicated. At the same time, the code reusability is not high, and a page component is often written to three or four hundred lines.

At this point, the Composition API solves the problem. It provides functions such as Reactive, watchEffect, computed, REF, toRefs, hooks to help us. For example, watchEffect, known as a side effect, is a function that executes immediately when it is passed in, can trace its dependencies in a responsive manner, and re-run the function when its dependencies change.

03 Performance Improvement

Compared to Vue 2, Vue 3 shows significant performance improvements in bundle size (up to 41% weight reduction via tree-shaking), initial rendering (up to 55% faster), updates (133% faster), and memory usage (up to 54% less).

Vue 3 takes a “compiler information virtual DOM” approach: perform aggressive optimizations for the template compiler and generate render function code to enhance static content and leave runtime hints for binding types. Most importantly, the internal dynamic nodes are flattened to reduce the cost of runtime traversal. So the user can have the best of both worlds, either optimizing compiler performance with templates or directly controlling it with manual rendering when needed.

Improved TypeScript compatibility

Vue 3’s code base is written entirely in TypeScript and has type definitions that automatically generate, test, and build type declarations, so they’re always up to date. Composition APIS are great for type inference. Type checking for template expressions and props is now supported, and Vue 3 has full support for TSX.

05ENDING

For example, when you add something like this to your year-end review, presentation, or interview:

** “I led the team members to complete the reconstruction of the project with the latest version of Vue, including logic reconstruction and syntax upgrade, and fully adapted to Vue 3! The efficiency of packaging was improved by N times! The response speed of the page was improved by N times!” Are you afraid your boss won’t promote you? Do women in the office not admire you?