Guide de mise à niveau complet de Vue : exploration approfondie de l'API de composition

• Concepts et fonctions de base de l'API Composition
  • Fonction setup() :
  • réf et réactif :
  • Propriétés calculées et auditeurs :
  • Fonctions de composition
  • Hooks de cycle de vie :
• Composants d'écriture de l'API de composition
• Migrer de l'API Options vers l'API Composition
  • Structure des composants
  • Injection de dépendances
  • Refactorisation du modèle

La mise à niveau complète de Vue 3.x introduit l'API Composition, qui constitue une amélioration majeure par rapport à l'API Options traditionnelle de Vue 2.x. Il offre une manière plus flexible et modulaire d'organiser le code.

Concepts et fonctions de base de l'API Composition

Fonction setup() :

Le point d'entrée principal de Vue 3, utilisé pour définir l'état et la logique du composant, qui est exécuté après le hook beforeCreate et avant le hook create. Il remplace le contenu initialement défini dans les options telles que les données et les méthodes.

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

ref et réactif :

Utilisé pour créer des données réactives, ref est utilisé pour créer des données réactives de types de base et réactif est utilisé pour les proxys réactifs d'objets et de tableaux.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

Propriétés calculées et écouteurs :

calculé est utilisé pour créer des propriétés calculées qui sont recalculées uniquement lorsque les dépendances changent.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

watch est utilisé pour observer les changements dans les données réactives et exécuter des rappels lorsque des changements se produisent.

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Fonctions de composition

L'API Composition encourage la création de fonctions de composition réutilisables.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

Crochets de cycle de vie :

Les hooks de cycle de vie dans Vue 3 ne sont plus utilisés directement dans setup(), mais via de nouvelles fonctions de hook de cycle de vie telles que onBeforeMount et onMounted.

1. onBeforeMount : ce hook est appelé avant que le composant ne soit monté sur le DOM. Ceci est similaire au hook de cycle de vie beforeMount dans Vue 2.x.

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

2. onMounted : appelé immédiatement après le montage du composant sur le DOM. Équivalent à monté dans Vue 2.x.

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

3. onBeforeUpdate : appelé avant la mise à jour des données du composant, mais avant le début de la mise à jour du DOM. Semblable à beforeUpdate de Vue 2.x.

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

4. onUpdated : appelé une fois la mise à jour du DOM provoquée par les modifications des données des composants terminée. Équivalent à la mise à jour dans Vue 2.x.

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

5. onBeforeUnmount : appelé avant la désinstallation du composant. Semblable à beforeDestroy dans Vue 2.x.

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

6. onUnmount : appelé après la désinstallation du composant. Équivalent à détruit dans Vue 2.x.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

7. onActivated : appelé uniquement lorsque le composant est enveloppé avec est activé.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

8. onDeactivated : appelé uniquement lorsque le composant est enveloppé avec est désactivé.

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Composants d'écriture de l'API de composition

• Créez des données réactives : utilisez ref et reactive pour créer des variables réactives.
• Propriétés calculées : utilisez des fonctions calculées pour créer des propriétés calculées.
• Fonctions réactives : utilisez toRefs() et toRef() pour convertir les propriétés de l'objet en réactif.
• Écouteur : utilisez watch ou watchEffect pour surveiller les modifications des données.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

• Créer des données réactives : utilisez réactif pour créer un objet réactif contenant cityInput, la ville et la météo. ref peut également être utilisé pour les types de base de données réactives, mais dans ce scénario, réactif est plus adapté à la gestion de plusieurs états.

• Propriétés calculées : La propriété calculée currentCity renvoie directement la valeur de state.cityInput. Bien qu'il puisse être plus intuitif d'utiliser v-model="cityInput" directement dans cet exemple, il montre comment définir les propriétés calculées.

• Fonctions réactives : utilisez toRefs pour convertir les propriétés de l'objet d'état en références réactives indépendantes pour une liaison directe dans le modèle. Cela montre principalement l'utilisation de données réactives, plutôt que la fonction de conversion elle-même, car l'affectation de déstructuration directe (telle que const { cityInput } = state;) est suffisante dans le modèle.

• Écouteurs : utilisez la montre pour écouter les changements dans cityInput et effacez l'état météo à chaque fois que l'entrée change, afin qu'elle puisse être interrogée la prochaine fois.

Migrer de l'API Options vers l'API Composition

Structure des composants

Séparez l'état, les méthodes et la logique en fonctions distinctes. Dans l'API Options, nous définissons généralement les données, les méthodes, les calculs, etc. dans les options du composant. Dans l'API Composition, ces logiques sont séparées en fonctions distinctes. Par exemple :

API Options :

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

API de composition :

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

Injection de dépendance

Utilisez fournir et injecter. Dans l'API Options, nous utilisons provide et inject pour transmettre des données. Dans l'API Composition, ce processus reste le même :

API Options :

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

API de composition :

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

Refonte du modèle

Convertissez les propriétés et les méthodes liées en références directes.

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!