Réf vs React dans Vue 3 ?
<p>Découvrez quelques exemples tirés des didacticiels d'aperçu de Vue 3 de certaines personnes. [Actuellement en version bêta]</p>
<p>J'ai trouvé deux exemples :</p>
<h2>Formule de réaction</h2>
<pre class="brush:js;toolbar:false;"><template>
<bouton @click="incrément">
Le nombre est : {{ state.count }}, le double est : {{ state.double }}
</bouton>
</modèle>
<script>
importer { réactif, calculé } depuis 'vue'
exporter par défaut {
installation() {
état const = réactif ({
compte: 0,
double : calculé(() => state.count * 2)
})
fonction incrément() {
état.count++
}
retour {
État,
incrément
}
}
}
</script>
≪/pré>
<h2>Référence</h2>
<pre class="brush:js;toolbar:false;"><template>
<div>
<h2 ref="titleRef">{{ formattedMoney }}</h2>
<input v-model="delta" type="numéro">
<bouton @click="ajouter">Ajouter</bouton>
</div>
</modèle>
<script>
importer { ref, calculé, onMounted } depuis "vue" ;
exporter par défaut {
configuration (accessoires) {
//État
const argent = réf(1);
const delta = réf(1);
// Réfs
const titleRef = ref(null);
// Accessoires calculés
const formattedMoney = calculated(() => money.value.toFixed(2));
//Crochets
onMounted(() => {
console.log("titreRef", titreRef.value);
});
// Méthodes
const add = () => (argent.valeur += Nombre (delta.valeur));
retour {
delta,
argent,
titreRéf,
argent formaté,
ajouter
} ;
}
} ;
</script>
≪/pré>
<p><br /></p>
