Apprenez l'API combinée dans Vue 3 pour mieux organiser et gérer le code des composants

Apprenez l'API composée dans Vue 3 pour mieux organiser et gérer le code des composants

Vue 3 est la dernière version du framework Vue, qui introduit de nombreuses nouvelles fonctionnalités et améliorations intéressantes, parmi lesquelles les plus intéressantes L'accent est mis sur le API de composition. Les API Composable nous permettent de mieux organiser et gérer le code des composants, ainsi que de mieux réutiliser et partager la logique.

Dans Vue 2, nous utilisons l'API Options pour définir et organiser les composants. Chaque composant contient un objet options, qui contient les données, les méthodes, les hooks de cycle de vie du composant, etc. Cette approche peut conduire à un code confus, difficile à maintenir et à tester lorsque les composants sont volumineux et complexes. L'API de composition de Vue 3 offre une manière plus concise, flexible et composable d'écrire des composants.

1. Utilisation de base
L'API combinée est basée sur des fonctions et organise la logique via la « composition ». Nous pouvons diviser la logique du composant en fonctions plus petites, puis combiner ces fonctions pour créer le composant.

import { reactive, computed } from 'vue';

export default {
  setup() {
    // 响应式数据
    const state = reactive({
      count: 0,
    });

    // 计算属性
    const double = computed(() => state.count * 2);

    // 方法
    const increment = () => {
      state.count++;
    };

    return {
      state,
      double,
      increment,
    };
  },
};

Dans cet exemple, nous utilisons la fonction setup pour configurer la logique du composant. La fonction setup est une fonction spéciale qui sera appelée avant la création du composant. Nous pouvons définir des données réactives, des propriétés calculées et des méthodes dans la fonction setup et les utiliser comme valeurs de retour. setup函数来设置组件的逻辑。setup函数是一个特殊的函数，它会在组件创建之前被调用。我们可以在setup函数中定义响应式数据、计算属性和方法，并将它们作为返回值。

在上面的代码中，我们通过reactive函数来创建一个响应式的state对象，其中包含了一个count属性。我们还使用computed函数定义了一个计算属性double，它将count属性的值乘以2。最后，我们定义了一个increment方法，用于增加count属性的值。在setup函数的返回值中，我们将state、double和increment作为属性导出。

二、逻辑复用
使用组合式API，我们可以更容易地实现逻辑的复用。我们可以将一些常用的逻辑提取成自定义的Hook，并在多个组件中复用。

// useCounter.js
import { reactive } from 'vue';

export default function useCounter(initialValue) {
  const state = reactive({
    count: initialValue,
  });

  const increment = () => {
    state.count++;
  };

  const decrement = () => {
    state.count--;
  };

  return {
    state,
    increment,
    decrement,
  };
}

// ComponentA.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(0);
    const double = computed(() => state.count * 2);

    // ...

    return {
      state,
      double,
      increment,
      decrement,
    };
  },
};

// ComponentB.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(100);
    const half = computed(() => state.count / 2);

    // ...

    return {
      state,
      half,
      increment,
      decrement,
    };
  },
};

在这个示例中，我们创建了一个自定义的HookuseCounter来处理计数逻辑。useCounter函数接受一个初始值作为参数，并返回一个包含响应式数据和方法的对象。我们可以在任何需要计数逻辑的组件中调用useCounter函数，并使用返回值中的属性。

在ComponentA.vue和ComponentB.vue中，我们分别使用了不同的初始值调用了useCounter函数，并使用返回的属性来实现不同的计算逻辑。

三、与其他API组合使用
组合式API可以与Vue的其他API，如生命周期钩子、自定义指令等进行灵活的组合使用，使我们能够更好地控制组件的行为。

import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    // 组件挂载时触发
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 组件卸载前触发
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // ...

    return {
      count,
      increment,
    };
  },
};

在这个示例中，我们使用ref函数来创建了一个响应式的count变量，并定义了一个increment方法来增加count的值。我们还使用了onMounted钩子和onBeforeUnmount

Dans le code ci-dessus, nous utilisons la fonction reactive pour créer un objet state réactif, qui contient un attribut count. Nous définissons également une propriété calculée double à l'aide de la fonction computed, qui multiplie la valeur de la propriété count par 2. Enfin, nous définissons une méthode increment pour augmenter la valeur de l'attribut count. Dans la valeur de retour de la fonction setup, nous exportons state, double et increment comme propriétés.

2. Réutilisation logique🎜En utilisant l'API combinée, nous pouvons plus facilement implémenter la réutilisation logique. Nous pouvons extraire certaines logiques couramment utilisées dans des Hooks personnalisés et les réutiliser dans plusieurs composants. 🎜rrreee🎜Dans cet exemple, nous avons créé un HookuseCounter personnalisé pour gérer la logique de comptage. La fonction useCounter accepte une valeur initiale comme paramètre et renvoie un objet contenant des données et des méthodes réactives. Nous pouvons appeler la fonction useCounter dans n'importe quel composant nécessitant une logique de comptage et utiliser les propriétés dans la valeur de retour. 🎜🎜Dans ComponentA.vue et ComponentB.vue, nous avons utilisé différentes valeurs initiales pour appeler la fonction useCounter, et utilisé les propriétés renvoyées pour mettre en œuvre différentes logiques de calcul. 🎜🎜3. Utilisation en combinaison avec d'autres API🎜L'API combinée peut être combinée de manière flexible avec d'autres API de Vue, telles que des hooks de cycle de vie, des instructions personnalisées, etc., nous permettant de mieux contrôler le comportement des composants. 🎜rrreee🎜Dans cet exemple, nous utilisons la fonction ref pour créer une variable count réactive et définir une méthode increment pour augmenter la valeur de compte. Nous utilisons également le hook onMounted et le hook onBeforeUnmount pour effectuer les opérations correspondantes lorsque le composant est monté et démonté. 🎜🎜L'API combinée nous offre un moyen plus flexible, composable et testable d'organiser et de gérer le code des composants. En divisant la logique et en la réutilisant, nous pouvons mieux améliorer la lisibilité, la maintenabilité et l'évolutivité du code. Si vous n’avez pas encore essayé l’API composable de Vue 3, c’est le moment idéal ! 🎜

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!