Everything you need to know about Vuejs V 3.2

The popular JavaScript UI building framework Vue.js has pushed out a new version 3.2 with promising users performance improvements along with presenting a technique for making custom components through the tool’s component APIs. The release date of Vuejs 3.2 is 5th August 2021 with a fixed import usage and no public API breakage.

The version is being nicknamed as "Quintessential Quintuplets" which includes many significant new features and contains no breaking changes in VueJs 3.2. Without further ado, let's know what’s new in Vuejs 3.2!

Vue.Js 3.2 : What's New Feature & Updates?

New SFC Features

Vuejs 3.2 features two new components for Single File Components (SFCs, aka .vue files) that have been upgraded from experimental status to a stable stage.

<script setup>
 import { ref } from 'vue'
 const color = ref('red')
<script><template>    
  <button @click="color = color === 'red' ? 'green' : 'red'">    Color is: {{ color }}  </button></template>

<style scoped>
  button {
    color: v-bind(color);
  }
</style>

While <script setup> is a compile-time syntactic sugar that exposes all top level bindings to a template eventually improving the ergonomics , <style> v-bind allows the connection of a component’s state and style and enables dynamic CSS values in SFC <style> tags.

Other than the adjustment and stabilization work being crucial to abandon the test status, <script setup> was fitted with help for namespaced segment tags and non-unequivocal type imports.

Web Components

Vuejs features another defineCustomElement strategy for effectively making native custom components utilizing Vue component APIs.

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

This API permits Vue developers to make Vue-controlled UI component libraries that can be utilized with any system, or no structure in any way, which is valuable when components are wanted to be integratable into various innovation stacks. The team have additionally added another part in the documentation on consuming and making Web Components in Vue. 

The strategy acknowledges similar contentions as defineComponent, yet returns a custom component constructor that broadens HTMLElement. It likewise works with Vue's single-file components (SFC), however, this use case requires a bit of extra consideration with style tags.

Performance Improvements

Vue.Js maker Evan You also vigorously featured the performance improvements that got sent with the new delivery, taking note of "huge performance upgrades to Vue's reactivity framework". Vue.Js 3.2 has a better working template compiler that is a more aggressive constant hoisting. 

Along with this, v-memo directive gives the capacity to memoize some portion of the format tree.A v-memo hit permits Vue to skip the Virtual DOM diffing along with the production of new VNodes altogether. Although rarely required, it gives a getaway hatch to crush out most extreme execution in specific situations, for instance enormous v-for lists.

Server-side Rendering

Another feature of Vue.Js 3.2 is the @vue/server-renderer package sends an ES module construct which is also decoupled from Node.js built-ins. This makes it possible to package and use @vue/server-renderer for use inside non-Node.js runtimes like CloudFlare Workers or Service Workers. 

The expansion additionally fills in as the establishment for some experimental compile-time macros that are intended to work on responsive code a bit by offering approaches to utilize refs without value — something that has been a hotspot for complications previously. 

The team has additionally developed the streaming render APIs, with new techniques for delivering to the Web Streams API. 

Effect Scope API

Vue.js 3.2 features another Effect Scope API for straightforwardly controlling the removal timing of receptive impacts (computed and watchers). It makes it simpler to use Vue's reactivity API out of a component setting, and furthermore opens some high level use cases inside components. 

This is a low-level API to a great extent expected for library authors as opposed to Vuejs 3.0 where Composition API improved the quality of the code and co-exist with the Options API.  Hence, it's prescribed to peruse the component's RFC for the inspiration and use cases of this element. 

Library authors are urged to look at the recently added Effect Scope API for @vue/reactivity. The interface is a deliberation of the event collection and disposal capacities accessible in a component’s arrangement(). Prior to its introduction, effects were required to be manually gathered when utilized outside of components or as a standalone, since they should be arranged when a component is unmounted.

Compatibility Notes

This release does not have any public API breakage however contains a few compatibility related notes:

• Because of use of new runtime partners, code produced by the layout compiler in >= 3.2 won't be viable with runtime < 3.2. 
• The release only affects cases where there is a variant mismatch between the compiler and the runtime. The most well-known case is libraries that transport pre-ordered Vue components.
• This delivery ships TypeScript typings that depend on Template Literal Types and needs TS >= 4.1.

What's Next

The team is excited to have been able to launch Vue.Js 3.2 after halting for nearly half a year to just stabilize the Vue.js 3 release. The transition period is now over and we are off to better things with fundamental improvements that  opens up avenues for future iterations. It is certainly a pleasure for Vue development company to see what new ideas and tools are yet to be embarked upon for a new chapter in the Vue.js roadmap.