Detaillierte Erläuterung der Funktionen und Methoden des Vue3-Lebenszyklus

<script src="../vue.global.js"></script>
</Kopf>
<Text>
    <div id="meinDiv"></div>
</body>
<Skript>

    // Lebenszyklusfunktion: eine Funktion, die zu einem bestimmten Zeitpunkt automatisch ausgeführt wird const app = Vue.createApp({ // Eine Vue-Anwendungsinstanz erstellen data() {
            zurückkehren {
                Nachricht: "Hallo"
            }
        },
        //Die Funktion, die automatisch ausgeführt wird, bevor die Instanz generiert wird beforeCreate() {
            Warnung("vorErstellen")
        },
        //Die Funktion created() wird automatisch ausgeführt, nachdem die Instanz generiert wurde {
            alert("erstellt")
        },
        // Funktion, die automatisch ausgeführt wird, bevor der Komponenteninhalt auf der Seite gerendert wird beforeMount() {
            Warnung("vorMount: " + document.getElementById("myDiv").innerHTML)
        },
        // Funktion mounted(), die automatisch ausgeführt wird, nachdem der Komponenteninhalt auf der Seite gerendert wurde { // Alert("mounted: " + document.getElementById("myDiv").innerHTML) nach dem Binden automatisch ausführen
        },
        // Führe beforeUpdate() aus, bevor sich die Daten in data ändern {
            
            alert("vorUpdate: " + document.getElementById("myDiv").innerHTML);
        },
        // Wenn sich die Daten in data ändern, führe updated() aus {
            alert("aktualisiert: " + document.getElementById("myDiv").innerHTML);
        },
        // Funktion, die vor dem Aufheben der Bindung ausgeführt wird beforeUnmount() {
            alert("vorUnmount: " + document.getElementById("myDiv").innerHTML);
        },
        // Funktion, die nach dem Aufheben der Bindung ausgeführt wird unmounted() {
            alert("nicht gemountet: " + document.getElementById("myDiv").innerHTML);
        },
        //Wenn keine Vorlage vorhanden ist, nimm das untergeordnete Element unterhalb des gebundenen Elements als Vorlage
        Vorlage: "<div>{{message}}</div>"
    });

    // vm ist die Stammkomponente der Vue-Anwendung const vm = app.mount('#myDiv'); // Binde das Element mit der ID myDiv // Aktualisiere Daten vm.$data.message = 'Hallo Welt!!!';

    // Aufheben der Bindung app.unmount();
</Skript>