Vue released version 3.0, promising to bring the audience colorful performances

Tram Ho

Below is the news of the latest FE framework news on May 5, 2020, the main news today about Vuejs will be released in the media version 3.0, reported live in Russia by reporter Duc An

By now, you may have realized that you are about to receive a new version of Vue. The Vue construction team released the Alpha version a few months ago with the roadmap

While waiting for version 3 to be released, I think we need to update the information as soon as possible to the human world so that it will not be dark and timely. So after reading this article, you are up-to-date already


TL; DR? Fast, light, easy to use

So, what will make us excited when Vue 3 comes out?

The Evan and Vue team said a few words that when vue3 came out, it promised a version

  1. Faster
  2. Smaller size Bundle (look forward to my little test of this part nhé)
  3. Maintain code will be less painful
  4. Towards phone interface (like react-native)
  5. Life will be more beautiful (although it still cannot erase the image of his neighbor every Saturday singing loudly)

Yes, on top of that is the cool stuff we’ll see in Vue’s new shirt, I just got excited already nghe now I’ll go into each part to see how cool it is.

Vue3 will be faster

In vue3 virtual dom ( what vdom is ) will be removed and rewritten from the beginning, the performance increase can be up to 100% (compared to v2) when mounting (initial) and patching (patching dom when state update) Additional features that promise to bring better performance for Vue:

  • Component fast path: currently in vue, the compiler will check if the template is a component or not, which takes quite a while to compile. Instead vue3 assumed a capitalized template would be a component, making the rendering process faster
  • Monomorphic Calls: This small optimization makes it easier to support the javascript engine
  • Optimized Slots Generation: according to the current mechanism, every time the parent and child component change, both will re-force rerender, which will cause wasteful renderings. Vue3 has rebuilt the slot compiler floor of the slot to help minimize this waste
  • Static Tree Hoisting: skip patching unnecessary static templates, in vue3 the static node and props have been separated by the compiler into a separate variable.
  • Proxy-based observation mechanism: bye Object.defineProperty, vue3 has used the proxy feature of es6 with better reliability and peformance. Have you ever had problems updating the property of an array without a rerender component? Vue3 has handled it

In addition, Vue v3 also supports compiler hint so that developers can optimize the code when looking at the output, optimize Component initialize to help launch applications faster.

Reduce more than half the memory usage (too cool)

Vue3 will be lighter and lighter

Have you ever visited a website that loaded in the blink of an eye or even didn’t realize it? With the ad line of Vue3 “Vue3 helps your website load as fast as the old lover kicked you” then I believe that it is entirely possible. Things that will make vue3 lighter than ever are:

  • Tree-shaking friendly: things you don’t need are not there. In vue3 every module has been tree-shakable, it will only be attached to bundle if you use them
  • New core: with the runtime restoration version with bundle size only 10kb, promising your app will make your app as fast as a storm

The core version of vue3 will be more maintainable

flow -> typescript: no more flow ever, facebook! Typescript will help Vue reach more developers, suggestion in IDE is also better

I see how React looks like =)))))

Vue3 is also divided into separate packages, use each time you need them. Thanks to that, increasing the proportion of contributor to vue increases the likelihood of developing vue community

The compiler in Vue3 has been rewritten to make plugable, IDE better

Vue3 is geared towards native

In vue3, the current renderer can be customized to increase the ability to build native on both mobile and desktop (also not very easy =))) because of its flexibility. When it comes to native, Vue has made its way more comparable to React Native than the Reactivity API, which lies deep within the current vue that has been exposed so we can do more with it. Also answer the question that the majority of Vue users: When will my component be redrawn =)))), using the chrome renderTriggered and debugger

Some other cool things about vue3

  • Better warning trace: trace props, functional component, add some cases for the upcoming fun forecast warning =))
  • Composition API: which caused a lot of controversy on Vue3, it will be similar to the hook in React, you can google for more details. This feature has also been tested on vue2
  • Compatibility with the old version, your code will not need to fix too much
  • Time Slicing: an experimental feature that makes rerender multi-tier components faster

Conclude

Vue3 promises to bring a new experience to developers, making life easier for developers as Vue targets big teams with easy-to-learn, simple, comprehensive, capable development (this is really important)

After reading the article, you may think “Why, I still use Angular at the company and React for my project”, agree with you this will still be true, React and Angular are still 2 popular frameworks right now. Most variables for Frontend. But anyway, when Vue3 comes out, there are some cool things in Vue that people will have to think back on when they can make Vue can compete with React and Angular for years to come.

Refer:

Share the news now

Source : Viblo