Vue3.2 est sorti, apportant ces nouvelles fonctionnalités !

Premier : 2d1858297e72f716b2504a0c5161edaf Diplôme officiel

J'ai remarqué la 2d1858297e72f716b2504a0c5161edaf dès le début de l'apprentissage de vue3. Parce que la méthode d'écriture concise est recherchée par de nombreuses personnes (tous ceux qui ont écrit setup(){return{}} le savent), certaines personnes disent même qu'il s'agit de la forme complète de vue3. Après avoir lu la description de la mise à jour, euh... les plaintes officielles sont les plus meurtrières.

5101c0cdbdc49998c642c71f6b6410a8 est un sucre syntaxique au moment de la compilation qui améliore considérablement l'efficacité du travail lors de l'utilisation de l'API de composition dans SFC.

Deuxième : Ajouter c9ccee2e6ea535a969eb3f532ad9fe89 v-bind

Et c9ccee2e6ea535a969eb3f532ad9fe89 v-bind signifie simplement que vous pouvez utiliser des valeurs dynamiques définies par les composants en interne. Le responsable a donné un exemple :

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

Parce que le site officiel chinois de vue ne dispose pas pour le moment de ce contenu mis à jour, les étudiants qui en ont besoin devront peut-être se rendre sur le réseau externe pour lire les documents en anglais.

Adresse du document :

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

Troisième : Nouvelle méthode DefineCustomElement

Vue 3.2 introduit une nouvelle méthode DefineCustomElement, vous pouvez utiliser l'API du composant Vue pour créer facilement des éléments personnalisés natifs :

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(&#39;my-vue-element&#39;, MyVueElement)

Quatrième : Améliorations des performances

Il y a beaucoup d'espace ici pour parler de la mise à niveau des performances de la version 3.2, qui mentionne la nouvelle instruction v-memo. En termes simples, cette instruction mémorisera une partie de l'arborescence des modèles, ignorera non seulement la différence du DOM virtuel, mais aussi complètement. Ignorer la création d'un nouveau VNode. Peut être utilisé pour les grandes pages complexes.

Cinquième : Rendu du serveur

Enfin mentionné le rendu côté serveur et la nouvelle API Effect Scope. Les étudiants intéressés peuvent consulter de plus près le document de mise à jour.

blog.vuejs.org/posts/vue-3…

No. 6 : 1024Lab Parlons un peu plus

Je crois que de nombreux étudiants ont déjà commencé à l'utiliser. Comme vous pouvez le voir dans le document,

defineProps, définirEmits, définirExpose et withDefaults appartiennent aux macros du compilateur. Le document dit également :

They do not need to be imported, and are compiled away when is processed

Ils n'ont pas besoin d'être introduits et seront traités lors de la compilation.

Cependant, s'il n'est pas introduit et que vous l'utilisez, une erreur sera signalée.

<script setup>
const props = defineProps<{
  value?: number;
}>();
const emit = defineEmits<{
  (e: &#39;update:value&#39;, value: number): void;
}>();
</script>

Tout d'abord, eslint signalera une erreur :

ESLint: 'defineEmits' is not defined.(no-undef)

À ce stade, vous devez modifier la configuration d'eslint-plugin-vue

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}

Ensuite, la console du navigateur peut signaler une erreur après la compilation

defineEmits is not defined

Vous constaterez peut-être que DefinEmits, etc. ne sont pas compilés. Lorsqu'il est temps de s'en occuper, regardez le code source defineEmits via le navigateur et il est toujours là, avec une ligne ondulée rouge dessinée. À ce stade, vous devrez peut-être vérifier les versions de chaque package dans package.json et la version de vite 2.4.x Update et réessayer. Le code compilé devrait ressembler à ceci :

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!