Fonction de combinaison dans Vue3 : structuration logique des composants

Vue3 est un framework frontal important qui fournit de nombreuses fonctionnalités et fonctions utiles, dont les composants. Les composants Vue sont un concept abstrait couramment utilisé dans le développement front-end. Ils divisent la page front-end en parties distinctes et réutilisables. Ces parties ont un état et un comportement indépendants et peuvent être réutilisées dans différentes applications.

Cependant, en pratique, en raison de la complexité de la page frontale et de l'interaction entre les différents composants, les composants peuvent devenir encombrés et difficiles à maintenir. Par conséquent, Vue3 fournit une nouvelle fonctionnalité appelée fonction de composition, qui peut structurer efficacement la logique des composants, améliorant ainsi la lisibilité et la maintenabilité du code. Ce qui suit est une introduction aux fonctions de composition de Vue3.

Qu'est-ce qu'une fonction de combinaison ?

La fonction Composition est une nouvelle fonction utilisée dans Vue3, qui permet aux développeurs de diviser les fonctions logiques des composants en plusieurs fonctions réutilisables et de les combiner ensemble.

Dans Vue2, la logique des composants est implémentée via des options, telles que les méthodes, calculées, observateurs, etc. Cependant, cette approche peut conduire à une structure de code encombrée, puisque toutes les options pertinentes doivent être placées dans le même objet.

Vue3 change cela en combinant des fonctions. Cela nous permet d'organiser la logique des composants de manière plus fine, en divisant les fonctionnalités en fonctions plus petites et indépendantes. Chaque fonction de combinaison se concentre uniquement sur un certain aspect de la logique, tel que les requêtes réseau, les mises à jour d'état ou le traitement des événements. Ils peuvent être combinés via des fonctions de composition pour obtenir des fonctionnalités plus complexes.

Avantages des fonctions de combinaison

Les principaux avantages de l'utilisation des fonctions de combinaison sont :

1. Améliorer la réutilisabilité du code

. Les fonctions de composition divisent la logique des composants en petits morceaux afin que ces petits morceaux puissent être réutilisés à différents endroits. Par exemple, nous pouvons extraire une fonction qui récupère des données et l'appeler plusieurs fois dans le composant sans avoir à écrire la méthode à plusieurs reprises pour chaque composant.

2. Améliorer la lisibilité du code

L'utilisation de fonctions combinées peut rendre la structure du code plus claire et plus facile à comprendre. Chaque fonction se concentre uniquement sur un aspect spécifique de la logique, ce qui rend le code plus ciblé et plus facile à maintenir.

3. Indépendance

Les fonctions combinées ont une meilleure indépendance. Chaque fonction se concentre uniquement sur un aspect spécifique de la logique, de sorte que la fonction de chaque fonction soit plus simple et plus claire, et plus facile à tester et à maintenir.

Application pratique

Utilisons un exemple spécifique pour comprendre comment utiliser la fonction de combinaison dans Vue3.

Supposons que nous ayons un composant de recherche qui doit être utilisé à plusieurs endroits. Le composant a la logique suivante :

1. Reçoit un terme de recherche en tant que paramètre.
2. Recherchez les données correspondantes en appelant l'API.
3. Affichez les résultats de la recherche sur l'interface.

Pour ce composant, nous pouvons créer une fonction combinée appelée useSearch, qui contient les trois logiques ci-dessus :

import { ref } from 'vue'

export default function useSearch(keyword) {
  const searchResult = ref([])

  // 调用搜索API，并更新搜索结果
  async function search() {
    const res = await fetch(`https://api/?q=${keyword}`)
    searchResult.value = await res.json()
  }

  search() // 初始化调用一次

  return {
    searchResult,
    search
  }
}

in composant

<template>
  <div>
    <input type="text" v-model="keyword" @keyup.enter="doSearch" />
    <ul>
      <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import useSearch from './useSearch'

export default {
  setup() {
    const { search, searchResult } = useSearch('default')

    const keyword = ref('')

    function doSearch() {
      search(keyword.value)
    }

    return {
      searchResult,
      keyword,
      doSearch
    }
  }
}
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!