Shulou(Shulou.com)06/01 Report--

This article mainly explains what are the new features of Vue.js 3.2. the content of the explanation is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn what are the new features of Vue.js 3.2. what are the new features of Vue.js 3.2?

New functions of SFC

Two new features of a single file component (SFC, aka .vue file) have graduated from the experimental state and are now considered stable:

Is a compile-time syntax sugar that greatly improves ergonomics when using Composition API within SFC.

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

This is a sample component that uses these two new features together:

Import {ref} from 'vue'const color = ref (' red') Color is: {{color}} button {color: v-bind (color);}

Try it in SFC Playground, or read their respective documentation:

V-bind on top of this, we also have a new RFC to improve the ergonomics of ref by enabling compiler sugar.

Network component

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

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)

This API allows developers to create Vue-driven UI component libraries that can be used with any framework or have no framework at all. We also added a new section to our documentation about using and creating Web components in Vue.

Performance improvement due to the excellent work of @ basvanmeurs, 3.2 some significant performance improvements have been made to Vue's reactive system. Specifically:

More efficient ref implementation (about 260% read speed / about 50% write speed)

About 40% faster dependence on tracking

Reduce memory usage by about 17%. The template compiler has also made some improvements:

The speed of creating a common element VNode has been increased by about 200%

More positive continuous improvement [1] [2] finally, there is a new v-memo instruction that provides the ability to remember part of the template tree. A v-memo click allows Vue to skip not only virtual DOM version comparisons, but also to create new virtual nodes completely. Although rarely needed, it provides an escape pod to squeeze out maximum performance in some cases, such as large v-for lists.

The usage of v-memo is to add one line, making Vue one of the fastest mainstream frameworks in js-framework-benchmark

Server 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 makes it possible to bundle and leverage @ vue/server-renderer non-Node.js runtimes, such as CloudFlare Workers or Service Workers.

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

Effect range API

A new Effect Scope API has been introduced to directly control the processing time of reactive effects (calculations and observers). It makes it easier to take advantage of Vue's responsive API outside the context of the component and unlocks some advanced use cases within the component.

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

Thank you for your reading, the above is the content of "what are the new features of Vue.js 3.2". After the study of this article, I believe you have a deeper understanding of what the new features of Vue.js 3.2 are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.