Quelle est l'utilisation de la configuration dans vue3.0

Dans vue3.0, la fonction setup est l'entrée de l'API de combinaison et est utilisée pour définir les données et les paramètres. La syntaxe est "setup(props,{slots,attrs,emit}){const name ='name'return. {name}} " ; Cette fonction ne peut être que synchrone et non asynchrone.

L'environnement d'exploitation de cet article : système Windows 10, version Vue3, ordinateur DELL G3.

A quoi sert setup dans vue3.0

1 Caractéristiques et fonctions de la fonction setup

　Ce qui est sûr c'est que Vue3.0 est compatible avec la version Vue2.x, ce qui veut dire qu'on peut l'utiliser. Vue3 dans notre travail quotidien Utilisez la syntaxe appropriée de Vue2. La fonction entre les deux fonctions hook beforeCreate et Created du cycle de vie signifie que les données et les méthodes dans data et méthodes ne peuvent pas être utilisées dans la fonction de configuration

　　2. La fonction de configuration. est l'entrée de l'API Composition

3. Les variables et méthodes définies dans la fonction setup doivent être renvoyées à la fin, sinon elles ne peuvent pas être utilisées dans le modèle

2. Notes sur la fonction setup :

1. Puisque lorsque la fonction de configuration est exécutée, il n'y a pas de méthode d'exécution du cycle de vie créé, donc dans la fonction de configuration, les variables et les méthodes de données et de méthodes ne peuvent pas être utilisées　　2. Puisque nous ne pouvons pas utiliser de données et de méthodes dans le Fonction de configuration, Vue utilise directement la fonction de configuration pour éviter notre utilisation incorrecte. Ceci est modifié en non défini

　3. La fonction de configuration ne peut être que synchrone et non asynchrone

Utilisation 1 : Utiliser en combinaison avec ref

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
 
<script>
import {ref} from &#39;vue&#39;
export default {
 name:&#39;app&#39;,
 data(){
  return {
   name:&#39;xiaosan&#39;
  }
 },
 setup(){
  const name =ref(&#39;小四&#39;)
  const age=ref(18)
  function plusOne(){
   age.value++ //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

Utilisation 2. : Séparation du code

Options API et Composition API

Options API Convention :

Nous devons définir les paramètres de réception dans les accessoires

Nous devons définir les variables dans les données

Nous devons définir les propriétés calculées dans calculé

Nous avons besoin pour définir les propriétés d'écoute dans watch

Nous devons définir les méthodes d'événement dans les méthodes

Vous constaterez que l'API Options stipule où nous devons faire les choses, ce qui à son tour nous oblige à effectuer un fractionnement de code dans une certaine mesure.

Maintenant que nous utilisons l'API Composition, nous ne sommes plus d'accord comme ça. Par conséquent, l'organisation du code est très flexible. Notre code de contrôle peut être écrit dans le setup.

La fonction setup fournit deux paramètres, props et context. L'important est qu'il n'y a pas de this dans la fonction setup. Dans vue3.0, y accéder devient la forme suivante : this.xxx=》context.xxx

We. je n'ai plus ce contexte, sans la séparation forcée du code de l'API Options. L'API de composition nous offre un monde plus large, nous devons donc être plus prudents et plus contraints.

Pour le code logique complexe, il faut prêter plus d'attention à l'intention initiale de l'API Composition, et ne pas hésiter à utiliser l'API Composition pour séparer le code et le découper en différents modules pour l'export.

Nous nous attendons à ce que cela ressemble à ceci :

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useA();
let{ c, methodsC } = useC();
return{
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}

Même si la quantité de code dans le contenu de configuration devient de plus en plus grande, nous avancerons toujours d'une manière large mais pas compliquée et avec une structure de code claire.

【Recommandation associée : "

Tutoriel vue.js

"】

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!