Pourquoi nous utilisons l'API de composition dans VueJS

Nous avons besoin de temps pour la révision du code, la refactorisation et le code lisible/clair lorsque l'échelle de votre application augmente. Nous utilisons Mixins pour des fonctionnalités réutilisables et gardons des composants clairs. Nous pouvons résoudre ces problèmes avec l'API Composition. Je mentionnerai "Pourquoi nous utilisons l'API Composition" dans cet article.

Pourquoi?

Dans mon architecture de Front End, les composants fonctionnent sans logique métier. La logique métier doit être en dehors des composants. Les composants doivent fonctionner comme une couche de vue. La couche attend uniquement les données et n'affiche que les données. À ce stade, nous pouvons lui fournir l'API de composition.

Remarque : En fait, je préfère la classe JS pure pour la logique métier, mais je ne le mentionne pas dans cet article. C'est un sujet différent

• Nous pouvons conserver la même fonctionnalité dans les compositions associées
• Nous pouvons utiliser les fonctions de n'importe quel composant encore et encore. Les fonctions deviennent réutilisables avec les compositions
• La composition augmente la lisibilité du code

• Nous pouvons faire face à des conflits de noms de fonctions mixins lors de l'utilisation dans des composants
• Si le nombre de mixin augmente dans un composant, il est impossible de comprendre quelle fonction est liée à quel mixin
• Lorsque nous utilisons mixin dans mixin. Ça peut être comme mélanger en enfer

Nous avons une fonction de configuration dans Component. La fonction de configuration fonctionne comme un crochet et la fonction a plus de crochets.

La fonction de configuration se déclenche avant le rendu des composants afin que nous puissions obtenir des données d'accessoires avec des paramètres car nous n'avons pas de données d'accessoires pour le moment.

Remarque : Nous ne pouvons pas utiliser ce mot-clé dans la fonction de configuration car l'API de composition doit être indépendante des composants.

• Nous pouvons utiliser "ref" pour convertir les données réactives en valeur primitive (booléen, chaîne, nombre)

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

<template>
  <h2>Notes:</h2>
  <textarea v-model="notes" />
</template>

<script lang="ts">
import { watchEffect, ref, defineComponent } from "vue";
import { save } from "./api";

export default defineComponent({
  setup() {
    const notes = ref("");

    watchEffect(() => save(notes.value));

    return {
      notes,
    };
  },
});
</script>