Vue 3.2 is officially released, take it for you

Preface

On August 5th, Vue.js author You Yuxi announced the official release of Vue.js 3.2 on his blog. The relevant content of this article is a Chinese translation.

Original address: https://blog.vuejs.org/posts/vue-3.2.html

We are happy to announce the release of "Vue.js 3.2"! This version includes many important new features and performance improvements, and does not contain major changes.

New SFC function

The two functions of the single-file component (SFC, or .vue file) have been officially graduated from the experimental state, and a stable version is now available:

• <script setup> is a compile-time syntactic sugar that can greatly improve the developer experience when using Composition API in SFC.
• <style> v-bind enables dynamic CSS values driven by component state in the SFC <style>

Below are examples of these two new features

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

Interested friends can read their documents:

• https://v3.vuejs.org/api/sfc-script-setup.html
• https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

On this basis, <script setup> , we also have a new RFC to improve the ref experience by enabling the sugar of the compiler.

Web component

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

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 普通Vue组件选项
})

// 注册自定义元素。
// 注册后，所有`<my-vue-element>` 标签
// 页面上的将被升级。
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 have also added a new chapter to our documentation on using and creating web components in Vue.

Performance improvement

Due to @basvanmeurs , 3.2 has made some major performance improvements to Vue's reactive system. Specifically:

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

The template compiler has also been improved:

• The speed of creating common element VNode is increased by about 200%
• More active continuous improvement hoisting 1

Finally, there is a new v-memo command, which provides the ability to memorize 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 maximum performance in certain situations, such as large lists. v-memo v-for

Use one-line addition to make Vue one of the fastest mainstream frameworks in js-framework-benchmark

Server-side rendering

@vue/server-renderer3.2 now provides an ES module build, which is also separated from the Node.js built-in modules.
In this way, it can be @vue/server-renderer in a non-Node.js environment (such as CloudFlare Workers or Service Workers) through 06113ebfb1170a.

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

Effect Scope API

3.2 A new Effect Scope API introduced to directly control the processing time of reactivity 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, please refer to the full change log.

about me

Hi everyone, I’m Hoshino. Welcome to add me on WeChat qqlcx55 , or follow my public click on the front end 16113ebfb117fa to scan the code and learn to communicate.