What’s New In Vue.js 3.2?

Popular Javascript UI building framework Vue.js released it’s new version 3.2 on 5th August 2021, with amazing users performance improvements for making custom components through the tool’s component APIs.This new version is being nicknamed as “Quintessential Quintuplets” that includes many new features and contains no breaking changes in Vue.js 3.2. Without further discussion, let’s see what’s new in Vue.js 3.2.

What’s New In Vue.js 3.2?

1. Web Components-

Vue.js 3.2 came with a feature defineCustomElement strategy to effectively make native custom components using Vue components 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)

With this API developers can make Vue-controlled UI component libraries that can be used with any system, or no structure in nay any way, that is important when components are needed to be integrated in various innovation stacks. Also, the team added another part in the documentation on consuming and making Web Components in Vue. It acknowledges similar contentions as defineComponent, but returns a custom component constructor that broadens HTMLElement. Also, it works with Vue’s single-file components (SFC). However this use case needs some extra consideration with style tags.

2. New SFC Features-

Vue.js 3.2 features two new components for Single File Components (SFCs, aka. Vue files) that upgraded from experimental status to 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 which exposes all top level bindings to a template eventually improving the ergonomics, <style> v-bind allows connection of component’s state and style and enables dynamic CSS values in SFC <style> tags. Besides the adjustment and stabilization work is important to leave the test status, <script setup> was fitted with the help for namespaced segment tags and non-unequivocal type imports.

3. Server-side rendering-

Next new feature of Vue.js 3.2 is the @vue/server-rederer package that sends an ES module construct which also decoupled from Node.js built-ins. This makes it conceivable to package and use @vue/server-renderer for use inside non-Node.js runtimes like CloudFlare Workers or Service Workers. The expansion also fills in as the establishment for some experimental compile-time macros which are intended to work on responsive code by offering ways to use refs without value – something that has been a hotspot for complications previously. Also the team is developed the streaming render APIs, with new techniques to deliver the Web Streams API.

4. Performance Improvements-

Vue.js 3.2 has a better working template compiler that is more aggressive constant hosting. With this, v-memo directive provides ability to memoize some portion of the format tree. V-memo hit allows Vue to skip the Virtual DOM diffing with production of new VNodes. Though it needs rarely, it gives a getaway hatch to crush out most extreme execution in explicit circumstances, for instance tremendous v-for lists.

5. Compatibility Notes-

Latest Vue.js 3.2 release doesn’t have any public API breakage but contains some compatibility related notes:

• Due to the use of new runtime partners, code that is produced by the layout compiler in>=3.2 will not be viable with runtime < 3.2.
• Release just affects cases where there is a variant mismatch between compiler and runtime. Most popular case is libraries that transport pre-ordered Vue components. 
• This conveyance ships TypeScript typings that rely upon Template Literal Types and requires TS >= 4.1.

6. Effect Scope API-

Latest version of Vue.js provides a feature Effect Scope API for directly controlling the removal timing of receptive impacts. This eases the use of Vue’s reactivity API out of a component setting, and also opens high level use cases inside components. This low-level API generally expected for library authors rather than Vue.js 3.0 where Composition API improved quality of the code and co-exist with the Options API. So it is suggested to use the component’s RFC for the inspiration and use cases of this element. According to the library authors, you should be aware of recently added Effect scope API for @vue/reactivity.

The interface is a consideration of the event collection and disposal capacities accessible in a component’s arrangement(). Before its introduction, effects needed to be manually collected when used outside of components or as an independent, as they should to be arranged when a component is unmounted.

Wrap Up-

Vue.js is a popular framework among developers community to build UI and single page applications. If you are also thinking to use Vue.js for you next project, knowing the above new features of Vue.js 3.2 will help you in effective development. Developers at Solace Infotech are versed with the recent trends to help you through development. You can hire Vue.js developers of Solace team for an effective Vue.js development. Connect with Solace and get a free quote for app development. We will be happy to help you.