Comment Vue demande-t-il automatiquement les données d'arrière-plan et affiche-t-il la page ?

Avec la mise à jour continue de la technologie front-end, Vue.js, en tant que framework MVVM, est largement utilisé dans le développement d'applications Web modernes. Vue.js libère les développeurs des opérations DOM fastidieuses grâce à la liaison de données et à la composantisation, rendant le processus de développement plus efficace et plus agréable. Cependant, à mesure que les applications deviennent plus complexes, Vue.js oblige les développeurs à appeler manuellement des API pour demander des données au backend afin de mettre à jour le contenu sur la page front-end, ce qui rend le développement d'applications fastidieux et chronophage. Dans cet article, nous apprendrons comment utiliser Vue pour demander automatiquement des données d'arrière-plan et restituer la page afin de rendre le développement plus efficace et plus simple.

1. Présentation des composants Vue

Dans Vue.js, les composants constituent l'unité de base pour la création d'applications, qui permettent aux développeurs de diviser les applications en modules réutilisables et indépendants. Chaque composant Vue contient des modèles HTML, des objets d'instance Vue et des attributs tels que des données et des événements. Dans Vue, les composants peuvent être imbriqués les uns dans les autres en fonction de la relation entre les composants parents et enfants pour former une arborescence de composants permettant d'implémenter des fonctions d'application complexes.

2. Transfert de données entre les composants Vue

Dans Vue, afin de partager des données entre différents composants, nous devons utiliser le mécanisme de liaison de données de Vue pour le transfert de données. Il existe principalement les méthodes de liaison de données suivantes dans Vue :

1. Props

Props est un moyen de transmettre des données des composants parents aux composants enfants, similaire aux propriétés (props) dans React. Dans le composant parent, vous pouvez définir l'attribut Props dans le composant enfant, tout comme la définition des attributs dans les balises HTML. Le composant enfant peut accéder directement aux données transmises par le composant parent via this.props.

2. Événements

Les événements sont un moyen de transmettre des données des composants enfants aux composants parents, similaire aux rappels dans React. Dans le composant enfant, un événement personnalisé peut être déclenché via la méthode $emit et les données peuvent être transmises au composant parent. Dans le composant parent, vous pouvez utiliser v-on pour lier des événements personnalisés déclenchés par le composant enfant, tout comme pour lier des événements natifs, et vous pouvez recevoir les données transmises par le composant enfant.

3. Vuex

Vuex est une méthode de gestion d'état de Vue. Elle fournit un référentiel d'état unique au monde auquel n'importe quel composant peut accéder et modifier. En stockant les données qui doivent être partagées dans la bibliothèque d'état Vuex, nous pouvons facilement partager et transférer des données entre différents composants.

3. Vue demande automatiquement les données d'arrière-plan

La fonction de hook de cycle de vie dans Vue est une fonctionnalité importante du composant Vue. Elle fournit différentes fonctions de hook afin que les développeurs puissent effectuer différentes opérations à différentes étapes du cycle de vie du composant Vue. Dans la version Vue 2.x, les fonctions de hook de cycle de vie couramment utilisées incluent la création, le montage, la mise à jour, la destruction, etc. Parmi elles, créées et montées se trouvent deux fonctions de hook de cycle de vie couramment utilisées, qui sont exécutées respectivement après la création et le rendu du composant sur la page.

Dans les composants Vue, nous pouvons utiliser les fonctions de hook de cycle de vie créées et montées pour demander automatiquement des données d'arrière-plan et mettre à jour le contenu de la page frontale une fois le composant rendu sur la page. Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Créer un composant Vue

<template>
  <div>
    <h1>Users List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      const response = await fetch('/api/users')
      const data = await response.json()
      this.users = data
    }
  }
}
</script>

Dans le code ci-dessus, nous avons créé un composant Vue nommé UsersList, qui contient une liste ul pour afficher les données de la liste d'utilisateurs demandées en arrière-plan. Dans l'attribut data du composant, nous définissons un tableau nommé users pour stocker les données utilisateur demandées en arrière-plan. Dans la fonction de hook de création de cycle de vie du composant, nous avons appelé la méthode fetchUsers pour demander des données d'arrière-plan. Dans la méthode fetchUsers, nous utilisons le sucre de syntaxe async/wait pour demander des données d'arrière-plan de manière asynchrone et stocker les résultats dans l'attribut data du composant.

2. Démarrez l'application Vue

import Vue from 'vue'
import UsersList from './UsersList.vue'

new Vue({
  render: h => h(UsersList)
}).$mount('#app')

Dans le code ci-dessus, nous avons introduit les composants Vue et UsersList et créé un objet instance Vue via la nouvelle méthode Vue. Dans l'objet d'instance Vue, nous rendons le composant UsersList sur la page via la fonction de rendu et le montons sur le nœud DOM via la méthode $mount. De cette façon, après avoir démarré l'application Vue, Vue appellera automatiquement la fonction hook de cycle de vie créée du composant UsersList, demandera des données en arrière-plan et mettra à jour le contenu sur la page frontale.

4. Vue actualise automatiquement la page

Dans le développement d'applications, nous devons souvent implémenter la fonction de mise à jour automatique de la page, c'est-à-dire que lorsque les données d'arrière-plan changent, la page frontale peut automatiquement mettre à jour et afficher les dernières données. Dans Vue, nous pouvons utiliser le mécanisme de données réactives de Vue et le protocole WebSocket pour implémenter la fonction de mise à jour automatique de la page.

1. Utilisez le mécanisme de données réactif de Vue

Dans Vue, lorsque l'attribut de données du composant change, Vue restituera automatiquement le contenu sur la page frontale. Par conséquent, nous pouvons stocker les données d'arrière-plan dans l'attribut data du composant et mettre régulièrement à jour l'attribut data du composant via une minuterie ou d'autres méthodes pour obtenir l'effet de mise à jour automatique des pages.

2. Utiliser le protocole WebSocket

Le protocole WebSocket est un protocole de communication bidirectionnel qui peut réaliser une communication full-duplex sur la même connexion persistante. Dans l'application, nous pouvons utiliser le protocole WebSocket pour implémenter la fonction du serveur d'arrière-plan poussant les données vers le front-end. Lorsque les données d'arrière-plan changent, le serveur d'arrière-plan peut envoyer activement des données au client frontal et mettre à jour le contenu de la page frontale en temps réel.

5. Résumé

Vue.js, en tant que technologie importante pour le développement d'applications Web modernes, présente les caractéristiques de liaison de données bidirectionnelle, de composantisation, de lecteur de données et d'autres fonctionnalités, ce qui rend le développement des applications frontales deviennent plus efficaces et plus agréables. Dans cet article, nous avons appris à utiliser les composants Vue et les fonctions de hook de cycle de vie pour demander automatiquement des données d'arrière-plan et afficher les pages frontales. Dans le même temps, nous avons également présenté comment Vue actualise automatiquement la page, offrant ainsi aux développeurs davantage de choix techniques. J'espère que cet article pourra être utile à tout le monde et améliorer l'efficacité du travail.

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!