Vue 3.2 is released, stand up and continue learning!

Vue framework founder You Yuxi announced the Vue 3.2 version on the official blog and commented on his personal social account:

Then some users complained below that they couldn’t learn anymore!

Haha, a group of lovely programmers~

As for the user’s question, “If you don’t want to expose all variables or methods, can you just give up the setup syntax sugar? ", You Yuxi reminded: "Understand the difference between exposing to the template and exposing to the outside!"

Let's take a look at what to expect from the new version. A long-awaited new feature!

Vue 3.2 includes many important new features and performance improvements. Shortly after the new version was released, another Vue 3.2.1 update was added to the official CHANGELOG, with only a bug fix.

Two new members of SFC have successfully graduated from experimental status to stable status

Two new features of single file components (SFCs, aka .vue files) Status, they are:

• : New compilation syntax sugar, in short, script setup is equivalent to putting the code in when compiling and running Run in the setup function, and then define the exported variables into the context and include them in the returned object;
• <style> v-bind</style>: That is, in SFC's <style></style> Some CSS inline styles can be bound to the tag.

The following is a case component that uses these two function codes together:

<script>import { ref } from &#39;vue&#39;const color = ref(&#39;red&#39;)</script><template>
  <button>
    Color is: {{ color }}
  </button></template><style>button {
  color: v-bind(color);}</style>

Interested students can try it in the SFC Playground, or read the official documentation:

• https://v3.vuejs.org/api/sfc-script-setup.html

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

In addition, Vue officially built a new RFC based on <script setup></script>, Aimed at improving the ref experience through the compiler, experience feedback address: https://github.com/vuejs/rfcs/discussions/369

Web Component

Vue 3.2 introduces a newdefineCustomElement method, you can use the Vue component API to easily create native custom elements:

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)</my-vue-element>

This API allows developers to create Vue-driven UI component libraries, which can be used alone or in conjunction with other frameworks For specific instructions on how to use it, please refer to the official documentation: https://v3.vuejs.org/guide/web-components.html

Performance Improvement

• ##Yes Major optimizations to the react system, thanks to @basvanmeurs for his great work

• More efficient ref implementation (~260% faster read/~50% faster write)
  ~40% faster dependency tracking
  • ~17% reduction in memory usage
• Template compiler improvements:

• The speed of creating ordinary element VNode is increased by about 200%

• More active continuous hoisting

Finally, This version also provides a new v-memo directive that can implement part of the memory template tree function. This directive not only allows Vue to completely skip the new VNode creation step, but also skips virtual DOM differences. Although not used in many places, it can be used to squeeze maximum performance in special cases, such as processing large v-for lists.

Using a simple single-line addition, v-meno makes Vue the fastest mainstream framework in js-framework-benchmark:

Vue official blogServer-side rendering

This version of the

@vue/server-renderer package provides an ES module build that can be decoupled from the Node.js built-in module. This allows @vue/server-renderer to be bundled and used in non-Node.js runtimes such as CloudFlare Workers or Service Workers.

At the same time, this version also improves the streaming rendering API and provides new methods for Web Streams API rendering. Check out the

@vue/server-renderer documentation for more details: https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#streaming-api

Effect Scope API

Vue 3.2 also introduces a new Effect Scope API that can be used to directly control the processing time of reactive effects (calculations and observers). It makes it easier to use Vue's reactive API outside of component context, and unlocks some advanced use cases inside components.

This is a low-level API for library authors. Interested students can check the official RFC for more detailed internal principles and cases.

Related links:

• Vue change log: https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md
• Version update released by Vue official blog: https://blog.vuejs.org/posts/vue-3.2.html

Recommended learning: "javascript basic tutorial", "The latest 5 vue.js video tutorial selections"

The above is the detailed content of Vue 3.2 is released, stand up and continue learning!. For more information, please follow other related articles on the PHP Chinese website!