• VueJS 3.0.0 Beta: Features I’m Excited About
  • Nwose Lotanna
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: zhanght9527
  • Proofreader: Shixi-Li, Xionglong58, TUARAN

VueJS 3.0.0 Beta: Those exciting features

At the time of this writing, VueJS 3.0.0 is already in Beta. In this article, we will see an overview of the larger version presented by the Vue team at the latest ThisDot online conference.

Vue JS

Vue JS is a very popular progressive JavaScript framework created by Evan You and over 284 members of the Vue community. With over 1.2 million users, an accessible core library that focuses only on the view layer and an ecosystem that supports that core library, Vue can help you tackle the challenges of large, single-page applications.

The ecological system

It’s amazing to see how big the Vue ecosystem has become. One thing I’m particularly excited about is the recent release of [bit.dev] (bit.dev) support for VueJS. So now Vue developers can finally publish, document, and organize reusable components in the cloud component hub (just like React developers). Every new VueJS library or tool enhances this great framework, and some of them are particularly influential (not being able to freely publish components in any code base is a very bad experience for many developers).

This Dot meeting

During the pandemic, ThisDot meeting was held online on April 16th, where the core team presented the future trends of Vue JS, which we will summarize in this article.

performance

This new version of Vue JS is built for speed, and there is a noticeable speed difference between version 3.0 and previous Vue versions. Its update performance is 2 times better and server side rendering is 3 times faster. Component initialization is now more efficient, and even Compiler informed fast Paths is optimized. The virtual DOM has also been completely rewritten, and this new version will be faster than ever.

Support the Tree – shaking

In this version, actions such as tree-shaking are now supported as well. Most of the optional features in Vue are tree-shakable now, such as Transition and V-Model. This greatly reduces the size of the Vue application, a HelloWorld file size is now 13.5 KB, and with the support of the composite API, it can be as low as 11.75 KB. With all the runtime features included, a project might be only 22.5 KB in size. This means that even with the added features, Vue 3.0 is still lighter than any 2.x release.

Composition API

The Vue team introduced a new way to organize code, starting with the 2.x version where we used Options. Options is fine, but it has compiler drawbacks when trying to match or access Vue logic, and you have to deal with JavaScript. Therefore, the Composition API is a better solution to these problems, and it also has the freedom and flexibility to use and reuse pure JS functions in Vue components, allowing us to write less code. The Composition API looks like this:

<script>
export default {
  setup() {
    return {
      average(), range(), median()
    }
  }
} 

function average() { } 
function range() { } 
function median() { }
</script>
Copy the code

Does this make us lose the Options API? No, instead the Composition API and options API can be used together. (Which reminds me of React hooks)

Fragments

Just like React, Vue JS will introduce fragments in Vue 3.0.0. One of the main requirements for fragments is that Vue templates can only have one tag. So a code block like this will return an error in the Vue template:

<template>   
 <div>Hello</div>   
 <div>World</div>   
</template>
Copy the code

I first saw this idea implemented in React 16, where fragments are template wrapping tags that are used to construct HTML code without changing semantics. Just like Div tags, but with no effect on the DOM. For fragments, the manual render function can return arrays, and it works in a similar way to how it works in React.

Teleport

Teleports, previously known as portals, are a way for a seed node to render to a DOM node other than the parent component, such as for pop-up Windows or even Modals. Previously, dealing with this problem in CSS was usually cumbersome, but now Vue allows you to use <Teleport> in the template section to deal with this problem. I believe Teleport was inspired by React Portals and it will be released with Vue JS 3.0.0.

Suspense

Suspense is a component needed during lazy loading and is mainly used to wrap delayed components. You can use suspense components to wrap multiple delay components. Vue JS Suspense will be introduced in version 3.0.0 to wait for nested asynchronous dependencies in a nested tree, which works well with asynchronous components.

Better TypeScript support

Vue has supported TypeScript since version 2.x and will continue to support TypeScript with version 3.0.0. As a result, in Vue 3.0.0, which supports TSX, it is possible to generate new projects using the latest version of TypeScript, and there is not much difference between TS and JS code and apis. Class components are still supported (vue Class component@next is currently in alpha).

Version 3.0.0 Progress report

According to the project schedule on GitHub, the initial official release of Vue JS version 3.0.0 was scheduled for q1 2020, and as of April 16, 2020, Vue version 3.0.0 is now in beta! This means that all planned comment requests have been processed and implemented, and the team is now focused on library integration. There is now experimental support for Vue CLI Here and a very simple single-file component support based on Webpack Here.

Another version

Vue 2.7 is a minor release that will be released soon, and it will probably be the last release of the 2.x series before 3.0.0 is officially released. It will support port compatibility improvements from version 3.0.0 and provide warnings for features not in version 3.0.0.

For support……

Chances are low, but you may encounter a discrepancy with the 2.x version, and you must check to see if the RFC already has a solution for the problem, and if not, create a new issue. Remember to read the Problem Assistant to guide you in creating issues.

conclusion

The above is an overview of the new features of Vue JS version 3. The Vue team has identified this release as the fastest front-end framework on the market. You can view the ThisDot online conference slideshow here, Stay Safe and Happy hacking! So, what’s your favorite new feature?

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.