< script setup > + TS + volatile = really fragrant
vue3. Is it time for Volar to officially appear on the stage?
It can be seen from the above that 3.2 has added new functions. In fact, it not only adds new functions, but also greatly improves the performance, but we don't see any major changes

< script setup > and < style > v-bind

Two new features are added, < script setup > and < style > v-bind
< script setup > is a compile time syntax sugar, which can greatly improve work efficiency when using Composition API in SFC.
< style > v-bind enables component state driven dynamic CSS values in SFC tags.

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

Do you think it's more convenient? Variables can be used directly in css, and the syntax is applicable to < script setup >, and JavaScript expressions are supported (they must be enclosed in quotation marks)

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

Actual values will be compiled as hashed CSS custom properties, so CSS is still static. Custom attributes are applied to the root element of the component through inline styles and are updated in response to changes in the source value.

defineCustomElement

In addition, vue3 2 also introduces defineCustomElement, a new method to easily create native custom elements using Vue component API

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)

The main benefit of custom elements is that they can be used with any framework, even without a framework. This makes them ideal for distributing components when the end consumer may not use the same front-end stack, or when you want to isolate the final application from the implementation details of the components it uses.

Vue supports the creation of custom elements using exactly the same Vue component API through the defineCustomElement method. This method accepts the same parameters as defineComponent, but returns an extended custom element constructor HTMLElement:

<my-vue-element></my-vue-element>

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement only: CSS to be injected into shadow root
  styles: [`/* inlined css */`]
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

// You can also programmatically instantiate the element:
// (can only be done after registration)
document.body.appendChild(
  new MyVueElement({
    // initial props (optional)
  })
)

performance

1. More efficient ref implementation (about 260% read speed / about 50% write speed)
2. About 40% faster dependency tracking
3. Reduce memory usage by about 17%
4. The speed of creating common element VNode is increased by about 200%

Added v-memo instruction to squeeze out more performance
v-memo remembers the subtree of the template. Available for elements and components. The instruction requires a fixed length array of dependency values to compare memory. If each value in the array is the same as the last rendering, the update of the entire subtree is skipped.

<div v-memo="[valueA, valueB]">
  ...
</div>

When a component is re rendered, < div > skips all updates to this component and its subcomponents if valueA and valueB remain unchanged. In fact, even Virtual DOM VNode creation will be skipped because the memory copy of the subtree can be reused.
Pay attention to the correct use of this instruction, otherwise it will be skipped when it needs to be updated.

Usage and v-for

v-memo is only used for micro optimization in performance critical scenarios and should be rarely needed. Only in large lists will its magic appear.

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

When the selected state of a component changes, a large number of vnodes are created even if most projects remain identical. The use of v-memo here essentially means "update this item only when it changes from non selection to selection, or vice versa". This allows each unaffected project to reuse its previous VNode and completely skip differences.

In addition, there are server-side rendering and effect range API s. Interested partners can see the original update address Portal