L'utilisation de la fonction de cycle de vie montée dans la documentation Vue

Vue est un framework JavaScript populaire largement utilisé pour créer des applications monopage et des pages Web dynamiques. Le framework Vue fournit de nombreuses fonctions de cycle de vie, dont une fonction très importante est la fonction montée. Dans cet article, nous explorerons l'utilisation des fonctions de cycle de vie montées dans la documentation Vue.

La fonction de cycle de vie montée est la fonction d'exécution de l'instance Vue une fois le montage terminé. En monté, nous avons accès aux éléments DOM rendus et pouvons effectuer toutes les opérations nécessaires sur eux. Plus précisément, la fonction de cycle de vie montée sera appelée immédiatement après l'initialisation de l'instance Vue, ce qui signifie que l'instance est prête, c'est-à-dire que l'élément DOM a été rendu. Cette fonction ne sera appelée qu'une seule fois.

La fonction de cycle de vie montée est généralement utilisée dans les scénarios suivants :

1. Obtenir des objets d'élément, des objets de nœud ou initialiser certains plug-ins dans des bibliothèques tierces

Dans la fonction montée, vous pouvez tout faire avec en obtenant l'objet élément ou l'objet nœud. Opération nécessaire. Par exemple, obtenez une référence à un élément spécifique via la méthode querySelector et demandez des données de manière asynchrone via ajax.

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  mounted(){
    const app = document.querySelector("#app");  // 获取带有id="app"的DOM元素
    console.log(app);  
  }
}
</script>

Vous pouvez également initialiser des bibliothèques ou des plug-ins tiers montés. Par exemple, initialisez les plug-ins Vue-Router, Vue-i18n, etc. dans la fonction de cycle de vie.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // VueRouter插件初始化

new Vue({
  router: new VueRouter({ .... }),
  ...
  mounted(){ /* 插件初始化 */ } 
})

2. Envoyer des requêtes Ajax au serveur, obtenir des données et mettre à jour les données dans Vue

Dans la fonction de cycle de vie montée, nous pouvons envoyer des requêtes Ajax au serveur et mettre à jour nos propriétés de données en utilisant une instance de Vue.

import axios from 'axios';

export default {
    data(){
        return{
            posts: []
        }
    },
    mounted(){
        axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
            this.posts = response.data;  // 获取远程JSON数据并更新组件的Data
        });    
    }
}

L'exemple ci-dessus demande des données de liste de tâches au serveur distant et met à jour l'objet de données dans Vue. De cette manière, le contenu lié aux données dans le composant sera affiché de manière fluide.

3. Opération sur DOM

La fonction de cycle de vie montée peut également être utilisée pour effectuer les opérations nécessaires sur DOM après le chargement de la page. Par exemple, une fois la page chargée, faites défiler jusqu'à une certaine position de l'élément ; après avoir cliqué sur le bouton, concentrez-vous sur une certaine zone de texte.

export default {
    mounted(){
        const targetDiv = document.getElementById('scroll-to-this-div');
        window.scrollTo(0, targetDiv.offsetTop);  // 点击'滚动到此'按键后，将窗口滚动到'div'元素的顶部
    }
}

La fonction de cycle de vie montée permet aux développeurs d'apporter les modifications ou opérations nécessaires au DOM qui a été présenté à l'utilisateur sous le contrôle du cycle de vie de Vue, améliorant ainsi efficacement l'expérience utilisateur et l'interactivité de l'interface.

Conclusion

Cet article présente principalement l'utilisation de la fonction de cycle de vie montée dans le document Vue. Tout comme après avoir trouvé une mer ouverte, les développeurs peuvent librement manipuler et modifier le DOM dans la fonction montée. Bien sûr, il ne faut pas oublier la philosophie du framework Vue : il est important de résoudre les problèmes dans les documents Vue avec le moins de coûts possible, et de limiter l'utilisation des cycles de vie et autres fonctions hook. Bien que les autres fonctions de cycle de vie de Vue ne soient pas exécutées derrière le montage, elles permettent aux développeurs de contrôler parfaitement le cycle de vie de la page entière, tout comme ils contrôlent Time-Machine.

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!