1. Style API
Les composants Vue peuvent être écrits dans deux styles différents : API d'options et API de composition .
2. API combinée
1. (L'idée principale de l'API combinée est de définir des variables d'état réactives directement dans la portée de la fonction et de combiner les états obtenus à partir de plusieurs fonctions pour traiter des problèmes complexes. Cette forme est plus gratuite,)
2. Dans les composants à fichier unique, les API combinées sont généralement utilisées conjointement avec <script setup>
3.setup indique à Vue qu'il doit effectuer un traitement au moment de la compilation
4. Exemples
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {
{ count }}</button>
</template>3. Réparer le caractère.empêcher
.prevent Le modificateur indique v-on à la directive d'appeler le event.preventDefault()
<form @submit.prevent="onSubmit">...</form>4. Déclarer l'état réactif
(1) ref() Dans l'API combinée, il est recommandé d'utiliser la fonction ref() pour déclarer l'état réactif :
import { ref } from 'vue'
const count = ref(0)ref() Prend les paramètres et .value les renvoie enveloppés dans un objet ref avec des attributs :
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0(2) Pour accéder aux références dans les modèles de composants, setup() déclarez-les et renvoyez-les à partir des fonctions du composant.
Notez que nous n'avons pas besoin d'ajouter lors de l'utilisation de ref dans les modèles ..value
Pour une logique plus complexe, nous pouvons déclarer des fonctions qui modifient la référence dans la même portée et les exposer sous forme de méthodes avec l'état :
<button @click="increment">
{
{ count }}
</button>import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
// 在 JavaScript 中需要 .value
count.value++
}
// 不要忘记同时暴露 increment 函数
return {
count,
increment
}
}
}（3） <script setup>
Il est très fastidieux d'exposer manuellement un grand nombre d'états et de méthodes dans setup() la fonction, on peut <script setup> grandement simplifier le code en utilisant :
<script setup> Les importations, les variables déclarées et les fonctions de niveau supérieur peuvent être utilisées directement dans le modèle du même composant
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{
{ count }}
</button>
</template>(4) Pourquoi utiliser la réf ?
Lorsque vous utilisez une référence dans un modèle et que vous modifiez ensuite la valeur de la référence, Vue détectera automatiquement le changement et mettra à jour le DOM en conséquence. Cette .value propriété donne à Vue une chance de détecter quand une référence est consultée ou modifiée
(5) Calendrier de mise à jour du DOM
Pour attendre la fin de la mise à jour du DOM avant d'exécuter du code supplémentaire, vous pouvez utiliser l' API globale nextTick() :
import { nextTick } from 'vue'
async function increment() {
count.value++
await nextTick()
// 现在 DOM 已经更新了
}（6）reactive()
reactive() Apis. Contrairement à ref qui enveloppe la valeur interne dans un objet spécial, reactive() l'objet lui-même sera réactif :
import { reactive } from 'vue'
const state = reactive({ count: 0 })(7) Limites de réactif()
1. Les types de valeur limitée ne peuvent être utilisés que pour les types d'objets (collections telles que des tableaux, des objets, des ensembles de cartes)
2. L'objet entier ne peut pas être remplacé. Cela signifie que nous ne pouvons pas facilement « remplacer » les objets réactifs par
3. Peu favorable aux opérations de déconstruction
En raison de ces limitations, nous vous recommandons d'utiliser Reactive ref() comme API principale pour déclarer l'état réactif.
5. Propriétés calculées
Les valeurs de propriété calculées sont mises en cache en fonction de leurs dépendances réactives
(1) Calculer les attributs pour décrire une logique complexe qui dépend de l'état réactif
<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
<template>
<p>Has published books:</p>
<span>{
{ publishedBooksMessage }}</span>
</template>(2) Propriétés calculées inscriptibles
Les propriétés calculées sont en lecture seule par défaut. Vous pouvez créer en fournissant à la fois un getter et un setter
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
// getter
get() {
return firstName.value + ' ' + lastName.value
},
// setter
set(newValue) {
// 注意：我们这里使用的是解构赋值语法
[firstName.value, lastName.value] = newValue.split(' ')
}
})
</script>Désormais, lorsque vous exécuterez à nouveau fullName.value = 'John Doe' , le setter sera appelé et firstName la lastName somme sera mise à jour en conséquence.
6. Modificateurs clés
1. Appelez « submit » uniquement lorsque « key » est « Entrée »
<input @keyup.enter="submit" />Vous pouvez directement utiliser le nom de la clé exposé par KeyboardEvent.key comme modificateur
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>2 .exact Modificateurs Permet de contrôler les modificateurs des touches système requis pour déclencher certaines combinaisons d'un événement.
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>7. Modificateurs de saisie de formulaire
1.lazy
modificateur pour change mettre à jour les données après chaque événement :
<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />2.number
Si vous souhaitez que la saisie de l'utilisateur soit automatiquement convertie en nombre
3.trim
Par défaut, les espaces aux deux extrémités de la saisie utilisateur sont automatiquement supprimés
Huit, crochet du cycle de vie
1.onBeforeMount()
Appelé avant le montage du composant .
2. onMounted Crochet
Peut être utilisé pour exécuter du code une fois que le composant a terminé son rendu initial et créé un nœud DOM :
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>3.onBeforeUnmount()
Appelé avant le démontage de l'instance du composant .
4.onDémonté()
Appelé après le démontage d'une instance de composant .
5.onBeforeUpdate()
Appelé juste avant qu'un composant ne mette à jour son arborescence DOM en raison d'un changement d'état réactif.
6.onUpdated()
Appelé après qu'un composant a mis à jour son arborescence DOM en raison d'un changement d'état réactif
7.onErrorCaptured()
Appelé lorsqu'une erreur transmise par un composant descendant a été interceptée.
8.onRenderTracked()
Appelé lorsqu'une dépendance réactive est suivie lors du rendu du composant.Ce hook est uniquement disponible en mode développement et ne sera pas appelé lors du rendu côté serveur.
9.onRenderTriggered()
Appelé lorsqu'un changement de dépendance réactif déclenche le rendu du composant. Ce hook est uniquement disponible en mode développement et ne sera pas appelé lors du rendu côté serveur
10.onActivated()
Appelé lorsque le composant est inséré dans le DOM.
11.onDeactivated()
Appelé lorsque le composant est supprimé du DOM.
12.onServerPrefetch()
Enregistrez une fonction asynchrone à appeler avant que l'instance du composant ne soit rendue sur le serveur
onServerPrefetch(async () => {
// 组件作为初始请求的一部分被渲染
// 在服务器上预抓取数据，因为它比在客户端上更快。
data.value = await fetchOnServer(/* ... */)
})9. Injection de dépendances
1.provide() -fournit une valeur qui peut être injectée par les composants descendants.
provide()setup() Doit être appelé de manière synchrone dans la phase du composant .
provide() Accepte deux paramètres : le premier paramètre est la clé à injecter , qui peut être une chaîne ou un symbole, et le deuxième paramètre est la valeur à injecter.
<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'
// 提供静态值
provide('foo', 'bar')
// 提供响应式的值
const count = ref(0)
provide('count', count)
// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>2.inject()
app.provide()Injecte une valeur fournie par un composant ancêtre ou l'application entière (via ).