Die Verwendung der gemounteten Lebenszyklusfunktion in der Vue-Dokumentation

Vue ist ein beliebtes JavaScript-Framework, das häufig zum Erstellen von Einzelseitenanwendungen und dynamischen Webseiten verwendet wird. Das Vue-Framework bietet viele Lebenszyklusfunktionen, von denen eine sehr wichtige Funktion die montierte Funktion ist. In diesem Artikel werden wir die Verwendung von gemounteten Lebenszyklusfunktionen in der Vue-Dokumentation untersuchen.

Die montierte Lebenszyklusfunktion ist die Ausführungsfunktion der Vue-Instanz nach Abschluss der Montage. Im gemounteten Zustand haben wir Zugriff auf die gerenderten DOM-Elemente und können alle erforderlichen Vorgänge an ihnen ausführen. Insbesondere wird die gemountete Lebenszyklusfunktion unmittelbar nach der Initialisierung der Vue-Instanz aufgerufen, was bedeutet, dass die Instanz bereit ist, dh das DOM-Element wurde gerendert. Diese Funktion wird nur einmal aufgerufen. Die gemountete Lebenszyklusfunktion wird normalerweise in den folgenden Szenarien verwendet:

Elementobjekte, Knotenobjekte abrufen oder einige Plug-Ins in Bibliotheken von Drittanbietern initialisieren.

1. In der gemounteten Funktion können Sie alles damit machen, indem Sie sie abrufen das Elementobjekt oder Knotenobjekt. Rufen Sie beispielsweise über die Methode querySelector einen Verweis auf ein bestimmtes Element ab und fordern Sie Daten asynchron über Ajax an.

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

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

Sie können auch Bibliotheken oder Plug-Ins von Drittanbietern im gemounteten Zustand initialisieren. Initialisieren Sie beispielsweise die Plug-Ins Vue-Router, Vue-i18n usw. in der Lebenszyklusfunktion.

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

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

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

Ajax-Anfragen an den Server senden, Daten abrufen und Daten in Vue aktualisieren

2. In der Funktion „Mounted Life Cycle“ können wir Ajax-Anfragen an den Server senden und unsere Dateneigenschaften mithilfe einer Instanz von Vue aktualisieren.

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
        });    
    }
}

Das obige Beispiel fordert Aufgabenlistendaten vom Remote-Server an und aktualisiert das Datenobjekt in Vue. Auf diese Weise werden datenbezogene Inhalte in der Komponente reibungslos angezeigt.

Vorgänge im DOM

3. Die gemountete Lebenszyklusfunktion kann auch verwendet werden, um notwendige Vorgänge im DOM auszuführen, nachdem die Seite geladen wurde. Scrollen Sie beispielsweise nach dem Laden der Seite zu einer bestimmten Position des Elements. Nachdem Sie auf die Schaltfläche geklickt haben, konzentrieren Sie sich auf ein bestimmtes Textfeld.

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

Die gemountete Lebenszyklusfunktion ermöglicht es Entwicklern, notwendige Änderungen oder Vorgänge am DOM vorzunehmen, das dem Benutzer unter der Lebenszykluskontrolle von Vue präsentiert wurde, und so das Benutzererlebnis und die Interaktivität der Benutzeroberfläche effektiv zu verbessern.

Fazit

In diesem Artikel wird hauptsächlich die Verwendung der montierten Lebenszyklusfunktion im Vue-Dokument vorgestellt. Genau wie bei der Entdeckung eines offenen Meeres können Entwickler das DOM in der gemounteten Funktion frei manipulieren und ändern. Natürlich dürfen wir die Philosophie des Vue-Frameworks nicht vergessen: Es ist wichtig, Probleme in Vue-Dokumenten mit möglichst geringen Kosten zu lösen und die Verwendung von Lebenszyklen und anderen Hook-Funktionen einzuschränken. Obwohl andere Lebenszyklusfunktionen in Vue nicht hinter gemountet ausgeführt werden, ermöglichen sie Entwicklern eine perfekte Kontrolle des Lebenszyklus der gesamten Seite, genau wie sie Time-Machine steuern.

Das obige ist der detaillierte Inhalt vonDie Verwendung der gemounteten Lebenszyklusfunktion in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!