Vue3ライフサイクル関数とメソッドの詳細な説明

<script src="../vue.global.js"></script>
</head>
<本文>
    <div id="myDiv"></div>
</本文>
<スクリプト>

    // ライフサイクル関数: 特定の時間に自動的に実行される関数 const app = Vue.createApp({ // Vue アプリケーションインスタンスを作成する data() {
            戻る {
                メッセージ: 「こんにちは」
            }
        },
        //インスタンスが生成される前に自動的に実行される関数 beforeCreate() {
            アラート("beforeCreate")
        },
        //インスタンスが生成されると、created() 関数が自動的に実行されます {
            アラート("作成")
        },
        // コンポーネントコンテンツがページにレンダリングされる前に自動的に実行される関数 beforeMount() {
            アラート("マウント前: " + document.getElementById("myDiv").innerHTML)
        },
        // コンポーネントコンテンツがページにレンダリングされた後に自動的に実行される関数mounted() { // バインディング後にalert("mounted: " + document.getElementById("myDiv").innerHTML)を自動的に実行します
        },
        // データが変更される前にbeforeUpdate()を実行する{
            
            アラート("beforeUpdate: " + document.getElementById("myDiv").innerHTML);
        },
        // データ内のデータが変更されたら、updated() を実行します {
            アラート("更新されました: " + document.getElementById("myDiv").innerHTML);
        },
        // アンバインド前に実行される関数 beforeUnmount() {
            アラート("マウント解除前: " + document.getElementById("myDiv").innerHTML);
        },
        // アンバインド後に実行される関数 unmounted() {
            アラート("マウント解除されました: " + document.getElementById("myDiv").innerHTML);
        },
        // テンプレートがない場合は、バインドされた要素の下の子要素をテンプレートとして取得します
        テンプレート: "<div>{{メッセージ}}</div>"
    });

    // vm は vue アプリケーションのルート コンポーネントです。const vm = app.mount('#myDiv'); // id が myDiv の要素をバインドします。// データを更新します。vm.$data.message = 'hello world!!!';

    // バインド解除 app.unmount();
</スクリプト>