Yu Yuxi's official announcement: Vue 3.2 has been released!

In the early hours of this morning, You Yuxi officially announced on the Weibo platform that Vue 3.2 has been released, and said:

<script setup> + TS + Volar = true fragrance

Vue 3.2 version includes many important new features and performance improvements, but does not contain major changes .

New single file component function:

<script setup> is a compile-time syntactic sugar, which can greatly improve work efficiency when using Composition API in SFC.

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

Example components that use 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>

Network components

Vue 3.2 introduces a new method to easily create native custom elements using the Vue component API: defineCustomElement

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 developers to create Vue-driven UI component libraries that can be used with any framework, or no framework at all. We also added a new section to the documentation about using and creating web components in Vue.

Performance improvement

Thanks to the excellent work of @basvanmeurs, 3.2 has made some major performance improvements to Vue's reactive system. details as follows:

• More efficient ref implementation (approximately 260% read speed/approximately 50% write speed)
• About 40% faster dependency tracking
• Memory usage reduced by about 17%

The template compiler has also been improved:

• The speed of creating common element VNode has been increased by about 200%
• More radical continuous improvement [1] [2]

Finally, there is a new v-memo instruction, which provides the ability to remember part of the template tree. The hit allows Vue not only to skip virtual DOM differences, but also to skip the creation of a new VNode altogether. Although rarely needed, it provides an escape pod to squeeze out maximum performance in certain situations, such as large lists. v-memo v-for

Use single line addition to make Vue the fastest mainstream framework in js-framework-benchmark:v-memo v-memo

Server-side rendering

The package in 3.2 now provides an ES module build, which is also separated from the Node.js built-in modules. This makes it possible to bundle and utilize non-Node.js runtimes (such as CloudFlare Workers or Service Workers). @vue/server-renderer @vue/server-renderer

We have also improved the streaming rendering API, providing new methods for rendering to the Web Streams API. Check @vue/server-renderer for more details.

Scope of Effect API

3.2 A new Effect Scope API is introduced to directly control the processing time of reactive effects (calculation and observer). It makes it easier to utilize Vue's reactive API outside of the component context, and it also unlocks some advanced use cases inside the component.

This is a low-level API mainly for library authors, so it is recommended to read the RFC of this feature to understand the motivation and use cases of this feature.

For a detailed list of all changes in 3.2, see the complete change log .