Comment utiliser monté dans vue

Le hook monté de Vue.js est appelé après la première insertion du composant dans le DOM et est utilisé pour effectuer : 1. Requête AJAX ; 2. Initialiser la bibliothèque tierce ; 3. Opération sur l'élément ; abonnement ; 5. Réglage de la minuterie. Des exemples spécifiques incluent l'obtention de données, la configuration d'écouteurs d'événements, l'initialisation de jQuery, etc.

Utilisation de Mounted dans Vue

Mounted est une méthode importante dans le hook du cycle de vie de Vue.js. Elle sera appelée après la première insertion du composant dans le DOM réel. Cette méthode est utilisée pour effectuer certaines opérations supplémentaires après le montage du composant, telles que :

1. Requête AJAX

Vous pouvez lancer une requête AJAX lors du montage pour obtenir des données du serveur. Ceci est utile pour remplir dynamiquement les données lors du chargement du composant.

2. Initialiser les bibliothèques tierces

Vous pouvez utiliser la méthode montée pour initialiser les bibliothèques tierces, telles que jQuery ou D3, etc. Cela garantit que ces bibliothèques ne sont pas initialisées tant que le composant n'est pas rendu.

3. Fonctionnement des éléments

Vous pouvez directement faire fonctionner les éléments DOM montés, par exemple en définissant des écouteurs d'événements ou en obtenant les dimensions des éléments. Cela améliore les performances car ces opérations ne sont effectuées que lors du premier rendu du composant.

4. Abonnez-vous aux événements

Vous pouvez utiliser monté pour vous abonner à des événements dans d'autres composants ou dans le stockage Vuex. Cela permet la communication entre différents composants ou entre les composants et le stockage.

5. Minuterie et intervalle

Vous pouvez définir une minuterie ou un intervalle monté pour effectuer des tâches régulièrement. Ceci est utile pour mettre à jour l’état des composants ou déclencher d’autres actions.

Exemple d'utilisation :

mounted() {
  // 发起 AJAX 请求
  this.$http.get('/api/data').then(response => {
    this.data = response.data;
  });

  // 初始化 jQuery
  $(this.$refs.container).draggable();

  // 订阅事件
  this.$on('update-data', () => {
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
  });

  // 设置定时器
  setTimeout(() => {
    this.message = '欢迎使用 Vue.js!';
  }, 1000);
}

Il convient de noter que la méthode montée ne sera appelée qu'après la première insertion du composant dans le DOM réel. Cette méthode ne sera pas appelée si le composant est restitué ou réinséré dans le DOM.

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!