preface

On August 5, Vue.js author Yu Yuxi announced the official release of vue.js 3.2 on his blog. The relevant content of this article is translated into Chinese.

Original address: blog.vuejs.org/posts/vue-3…

We are pleased to announce the release of “vue.js 3.2”! This release includes a number of significant new features and performance improvements, and contains no major changes.

New SFC features

Two features of the single-file component (SFC, i.e..vue file) have graduated from experimental status and are now available in stable versions:

  • < Script setup> is a compile-time syntax sugar that greatly improves the developer experience when using the Composition API within the SFC.

  • V-bind enables component state-driven dynamic CSS values in the SFC

Here 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>Copy the code

Interested friends, can read their documents:

  • V3.vuejs.org/api/sfc-scr…
  • V3.vuejs.org/api/sfc-sty…

Based on this

Web components

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({// regular Vue component options}) // Register custom elements. // After registration, all '<my-vue-element>' tags // on the page will be upgraded. customElements.define('my-vue-element', MyVueElement)Copy the code

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 section to our documentation on using and creating Web components in Vue.

Performance improvements

As a result of @Basvanmeurs’ excellent work, 3.2 introduces some significant performance improvements to Vue’s reactivity system. To be specific:

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

The template compiler has also received some improvements:

  • Creating a normal element VNode is about 200% faster
  • In the case of continuous lift of reactive power [1][2]

Finally, there is a new V-Memo directive that provides the ability to remember parts of the template tree. A hit allows Vue to skip not only the virtual DOM differences, but also the creation of a new VNode entirely. Although rarely required, it provides an escape pod to extrude maximum performance in certain situations, such as large lists

Use a single line add to make Vuejs-framework-benchmarkOne of the fastest mainstream frameworks in China:

Server-side rendering

The package in @vue/server-renderer3.2 now provides an ES module build, which is also separate from the node.js built-in module. This allows the @vue/server-renderer to run in a non-Node.js environment (such as CloudFlare Workers or Service Workers).

We’ve also improved the streaming rendering API, providing a new way to render to the Web Streams API. See the documentation at @vue/server-renderer for more details.

Effect Scope API

3.2 Introduces a new Effect Scope API to directly control the processing time of reactivity effects (both computational and observer). It makes it easier to leverage Vue’s responsive API outside of the component context, and it also unlocks some advanced use cases within the component.

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

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

Hi, I’m Hoshino. Welcome to add my wechat QQLCX55, or follow my public account front youdao click can scan code, learning communication.