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

1. 概要

いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。

2. VUE3ライフサイクル機能の紹介

2.1 作成前

VUEインスタンスが生成される前に自動的に実行される関数

2.2 作成

VUEインスタンス生成後に自動的に実行される関数

2.3 マウント前

コンポーネントコンテンツがページにレンダリングされる前に自動的に実行される関数

2.4 搭載

コンポーネントコンテンツがページにレンダリングされた後に自動的に実行される関数

2.5 更新前

データ内のデータが変更される前に実行される関数

2.6 アップデート

データ内のデータが変更されたときに実行される関数

2.7 アンマウント前

VUEインスタンスが要素からアンバインドされる前に実行される関数

2.8 マウント解除

VUEインスタンスが要素からアンバインドされた後に実行される関数

3. コード例

<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();
</スクリプト>