Première partie de la Conférence à l'école dinglu 2022-07-23 23:57:16 阅读数:203
vueLes composants de n'ont jamais été créés,Mise à jour des modifications des données,Afficher masquer,Cette étape différente estvueLe cycle de vie de.
À chaque étapevueQuelques fonctions sont fournies,Certaines opérations peuvent être effectuées à ce moment,Devenir une fonction de crochet du cycle de vie.
beforeCreate Ne peut pas être utilisé pour le momentthis,this- Oui.undefined Compris.,Ça ne sert à rien
created On peut liredataDonnées dans,AdoptionthisAccès. Ça pourrait être danscreatedEnvoyer une demande de données.Mais la page ne fonctionne pasdomEt composants
beforeMount Avant de monter Compris.,Ça ne sert à rien
mounted Après le montage de la page,Ici vous pouvez manipuler les composants de la page etdom
boforeUpdate Avant la mise à jour de la page
updated Après la mise à jour de la page
beforeUnmount Avant le déchargement des composants
unmounted Après le déchargement des composants Généralement utilisé pour effacer le minuteur,Effacer après la fermeture du lecteur, etc.
compositionAPIC'est une combinaisonapi,vue2Dedata,methods,C'est écrit séparément.Appelé optionsapi.vue3La combinaison est utilisée dansapi.
<template>
<div>{
{num}}</div>
<div @click="add"> add</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup () {
let num = ref(2)
let add = ()=>{
num.value ++
}
return {num,add}
}
}
</script>
Invue3 Utilisation de l'écoute ,watchParvue3 Encapsulé dans une fonction qui nous est fournie pour ,Il est nécessaire d'introduire
watch Introduit comme fonction , Le premier paramètre est la valeur que nous allons écouter ,Le deuxième argument est une fonction de rappel, Les paramètres sont les valeurs modifiées . Déclenché lorsque la valeur d'écoute change
<template>
<div>{
{num}}</div>
<div @click="add"> add</div>
</template>
<script>
import {ref,watch} from 'vue'
export default {
setup () {
let num = ref(2)
let add = ()=>{
num.value ++
}
watch(num,(v)=>{
if(v >5){
num.value = 5
console.log('Plus de')
}
})
return {num,add}
}
}
</script>
Copyright:Cet article est[Première partie de la Conférence à l'école dinglu]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2022/204/202207232356014934.html