Vue 3.2 Released!

We are excited to announce the release of Vue.js 3.2 “Quintessential Quintuplets”! This release includes many significant new features and performance improvements, and contains no breaking changes.

New SFC Features

Two new features for …


This content originally appeared on DEV Community and was authored by Eugene Kopich

We are excited to announce the release of Vue.js 3.2 "Quintessential Quintuplets"! This release includes many significant new features and performance improvements, and contains no breaking changes.

New SFC Features

Two new features for Single File Components (SFCs, aka .vue files) have graduated from experimental status and are now considered stable:

  • <script setup> is a compile-time syntactic sugar that greatly improves the ergonomics when using Composition API inside SFCs.

  • <style> v-bind enables component state-driven dynamic CSS values in SFC <style> tags.

Here is an example component using these two new features together:

<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>

Try it out in the SFC Playground, or read their respective documentations:

Building on top of <script setup>, we also have a new RFC for improving the ergonomics of ref usage with compiler-enabled sugar - please share your feedback here.

Web Components

Vue 3.2 introduces a new defineCustomElement method for easily creating native custom elements using Vue component APIs:

import { defineCustomElement } from 'vue'

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

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

This API allows develpers to create Vue-powered UI component libraries that can be used with any framework, or no framework at all. We have also added a new section in our docs on consuming and creating Web Components in Vue.

Performance Improvements

3.2 includes some significant performance improvements to Vue's reactivity system, thanks to the great work by @basvanmeurs. Specifically:

The template compiler also received a number of improvements:

Finally, there is a new v-memo directive that provides the ability to memoize part of the template tree. A v-memo hit allows Vue to skip not only the Virtual DOM diffing, but the creation of new VNodes altogether. Although rarely needed, it provides an escape hatch to squeeze out maximum performance in certain scenarios, for example large v-for lists.

The usage of v-memo, which is a one-line addition, places Vue among the fastest mainstream frameworks in js-framework-benchmark:

benchmark

Server-side Rendering

The @vue/server-renderer package in 3.2 now ships an ES module build which is also decoupled from Node.js built-ins. This makes it possible to bundle and leverage @vue/server-renderer for use inside non-Node.js runtimes such as CloudFlare Workers or Service Workers.

We also improved the streaming render APIs, with new methods for rendering to the Web Streams API. Check out the documentation of @vue/server-renderer for more details.

Effect Scope API

3.2 introduces a new Effect Scope API for directly controlling the disposal timing of reactive effects (computed and watchers). It makes it easier to leverage Vue's reactivity API out of a component context, and also unlocks some advanced use cases inside components.

This is low-level API largely intended for library authors, so it's recommended to read the feature's RFC for the motivation and use cases of this feature.

CHANGELOG

Compatibility Notes

This release contains no public API breakage. However, there are a few compatibility related notes:

  • Due to usage of new runtime helpers, code generated by the template compiler in >= 3.2 will not be compatible with runtime < 3.2.

This only affects cases where there is a version mismatch between the compiler and the runtime. The most common case is libraries that ship pre-compiled Vue components. If you are a library author and ship code pre-compiled by Vue >= 3.2, your library will be only compatible Vue >= 3.2.

Features

SFC

  • remove experimental status of <script setup> (27104ea) (Docs) (RFC)
  • remove experimental status for sfc <style> v-bind (3b38c9a) (Docs) (RFC)
  • support non-explicit type imports in <script setup> by avoiding exposing unused imports to template during dev (5a3ccfd), closes #3183
  • support namespaced component tags when using <script setup> (e5a4412)
  • (experimental) new ref sugar (562bddb) (RFC)

Custom Elements

Reactivity

SSR

Generic

Types

  • map declared emits to onXXX props in inferred prop types (#3926) (69344ff)

Performance Improvements

  • reactivity: improve reactive effect memory usage (#4001) (87f69fd), closes #2345
  • reactivity: ref-specific track/trigger and miscellaneous optimizations (#3995) (6431040)
  • reactivity: use bitwise dep markers to optimize re-tracking (#4017) (6cf2377)
  • compiler-core/runtime-core: improve VNode creation performance with compiler hints (#3334) (ceff899)
  • compiler-core: also hoist all-static children array (b7ea7c1)
  • compiler-core: hoist dynamic props lists (02339b6)
  • compiler-sfc: ignore empty blocks (#3520) (b771fdb)


This content originally appeared on DEV Community and was authored by Eugene Kopich


Print Share Comment Cite Upload Translate Updates
APA

Eugene Kopich | Sciencx (2021-08-10T03:26:05+00:00) Vue 3.2 Released!. Retrieved from https://www.scien.cx/2021/08/10/vue-3-2-released/

MLA
" » Vue 3.2 Released!." Eugene Kopich | Sciencx - Tuesday August 10, 2021, https://www.scien.cx/2021/08/10/vue-3-2-released/
HARVARD
Eugene Kopich | Sciencx Tuesday August 10, 2021 » Vue 3.2 Released!., viewed ,<https://www.scien.cx/2021/08/10/vue-3-2-released/>
VANCOUVER
Eugene Kopich | Sciencx - » Vue 3.2 Released!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/10/vue-3-2-released/
CHICAGO
" » Vue 3.2 Released!." Eugene Kopich | Sciencx - Accessed . https://www.scien.cx/2021/08/10/vue-3-2-released/
IEEE
" » Vue 3.2 Released!." Eugene Kopich | Sciencx [Online]. Available: https://www.scien.cx/2021/08/10/vue-3-2-released/. [Accessed: ]
rf:citation
» Vue 3.2 Released! | Eugene Kopich | Sciencx | https://www.scien.cx/2021/08/10/vue-3-2-released/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts