1. Qu'est-ce qu'une API combinée ?
L'API de composition Il s'agit d'un terme générique qui couvre les API dans les domaines suivants :
1. API réactives : telles que ref() et reactive(), qui nous permettent de créer directement des états réactifs, des propriétés calculées et des écouteurs.
2. Hooks de cycle de vie : tels que onMounted() et onUnmount(), qui nous permettent d'ajouter de la logique à chaque étape du cycle de vie du composant.
3. Injection de dépendances : Par exemple, provide() et inject() nous permettent de profiter du système d'injection de dépendances de Vue lors de l'utilisation d'API réactives.
2. Dans Vue 3, l'API combinée sera essentiellement utilisée dans des composants à fichier unique en conjonction avec la syntaxe Typescript. Voici un exemple de composant utilisant l'API de composition :
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 更改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`计数器初始值为 ${count.value}。`)
})
</script>
<template>
<button @click="increment">点击了：{
{ count }} 次</button>
</template>
3. Avantages de l'API combinée
1. Meilleure réutilisation de la logique
2. Organisation du code plus flexible
3. Meilleure dérivation de type
4. Taille du package de production plus petite