【Vue】ライフサイクルについてはこちらの記事で詳しく解説

作成する：

beforeCreate() ------ 作成前

作成した（） -

マウント：

beforeMount() ------ 挂载前

マウントされた()取り付け後

更新する:

beforeUpdate() ------ アップデート前

updated（） - to

破壊する：

beforeDestroy() ------- 破壊前

破壊されました()破壊以降

フック機能の使い方

<div class="app">
        <h1>{
   
   {msg}}</h1>
        {
   
   {num}}
        <button @click="add()">+1</button>
        <button @click="destroy()">销毁</button>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'Vue的生命周期',
                num:1
            },
            methods:{
                add(){
                     this.num++
                },
                destroy(){
                    this.$destroy()
                }
            },
            // 创建
            // 创建前
            beforeCreate(){
                console.log('beforeCreate');
            },
            // 创建后
            created(){
                console.log('Created');
            },
            // 挂载
            // 挂载前
            beforeMount(){
                console.log('beforeMount');               
            },
            // 挂载后
            mounted(){
                console.log('Mounted');
            },
            // 更新
            // 更新前
            beforeUpdate(){
                console.log('beforeUpdata');

            },
            // 更新后
            updated(){
                console.log('Updataed');

            },
            // 销毁
            // 销毁前
            beforeDestroy(){
                console.log('beforeDestory');

            },
            // 销毁后
            destroyed(){
                console.log( 'Destoryed');

            }

        })
    </script>

データを更新する

破壊する

このメソッドを呼び出す

this.$destroy()

サイクル-----創造フェーズ

仮想DOMの生成

このサイクルには、beforeCreate() と Created() という 2 つのフック関数が含まれています。

いわゆる作成とは、Vue インスタンスの作成ではなく、データエージェントの作成とデータモニタリングを指し、作成前と作成後を分けるために使用されます。

作成前は、メソッドを含めてデータ内のデータにアクセスできません。

例：

元のコードを元に、データ内のnumにアクセスします

//作成前

beforeCreate(){

console.log('作成前',this.num);

}

作成後にメソッドも含めてアクセス可能になります

//作成後

作成した（）{

console.log('作成されました',this.num);

}

作成段階で行われたこと

Vue インスタンス VM を作成する

イベントオブジェクトとライフサイクルを初期化する

beforeCreate() フック関数を呼び出します (現時点では、vm を介してデータ内の属性にアクセスできません)

データエージェントとデータモニタリングを初期化する

created() フック関数を呼び出します (この時点で、データエージェントとデータモニタリングが作成されており、データ内の属性には vm を通じてアクセスできます)

テンプレートステートメントをコンパイルして仮想 dom を生成します (この時点では仮想 dom のみが生成され、ページはまだレンダリングされていません)。

この段階で何ができるのか

beforeCreate(): この時点でいくつかの読み込み効果を追加できます。

作成: ローディング効果を終了し、いくつかのネットワークリクエストを送信し、データを取得し、タイマーも追加します。

サイクル----取り付け段階

本物の dom を生成する

このステージには、beforeMount() と Mounted() という 2 つのフック関数が含まれています。

実装前後でリアルなドムが発生します。

マウント前と作成後の間に仮想的な dom が生成されます。

マウントする前にページのコンテンツを変更することはできません。

// マウント前

beforeMount(){

console.log('マウント前');

document.querySelector('h1').innerHTML='mount'

}

取り付け後に変更可能

//マウント後

マウントされた(){

console.log('マウント済み');

document.querySelector('h1').innerHTML='mount'

}

実装段階では何が行われますか?

beforeMount() フック関数を呼び出します (ページはまだレンダリングされておらず、実際の DOM はまだ生成されていません)

$el 属性を vm に追加し、「el」を置き換えます。$el は実際の dom 要素を表します (この時点で実際の dom が生成され、ページのレンダリングが完了します)

Mounted() フック関数を呼び出す

このステージには何が適しているでしょうか？

マウント済み: ページの DOM 要素を操作できます

サイクル---更新段階

このステージは、データが変更され、再レンダリングが実行された後にのみトリガーされます。

このサイクルには、beforeUpdate() と updated() という 2 つのフック関数が含まれています。

ここでの更新前とは、データ内のデータが更新されたが、ページが再レンダリングされる前であることを意味します。

アップデート前

ブレークポイントデバッガの使用

// アップデート前

beforeUpdate(){

console.log('更新前');

デバッガ

}

更新しました

ブレークポイントのロックを解除する

//更新しました

更新しました（）{

console.log('更新');

}

そのうち更新前と更新後の間で差分アルゴリズムが実行され、仮想 dom が比較され、実際の dom が生成され、ページにレンダリングされます。

更新フェーズでは何が行われますか?

データの変更 (これはこのフェーズの開始の兆候です)

beforeUpdate() フック関数を呼び出します (この時点ではメモリ内のデータが変更されただけで、ページはまだ更新されていません)

仮想 DOM の再レンダリングとパッチ適用

updated() フック関数を呼び出します (この時点でページは更新されています)

このステージにふさわしいもの

beforeUpdate: 追加されたイベントリスナーを手動でクリアするなど、更新前に既存の dom にアクセスするのに適しています。

updated: ページが更新された後、データを均一に処理したい場合は、ここで実行できます。

サイクル----破壊フェーズ

モニター、サブコンポーネント、イベントリスナーをアンインストールする

このステージには、beforeDestroy() と破棄後の Destroy() という 2 つのフック関数が含まれています。

破壊というよりはアンインストールですが、Vue インスタンス上のすべてをアンインストールします。

このステージには、このメソッドを呼び出すことによってのみ入ることができます

vm.$destroy()

破壊の前に

vue インスタンスオブジェクトを出力し、モニターを確認します。破棄する前は、モニターはまだアクティブです。

// 破壊前

beforeDestroy(){

console.log('BeforeDestory');

コンソール.ログ(これ);

デバッガ

}

アクティブ化されていますが、まだ監視できません。元のコードに基づいてデータの num 属性を監視します

 watch:{
                num(){
                    console.log('监听一次');
                }
            },

num 属性の値が変化すると、それは正常に監視され、破棄を実行すると、上記のことから、リスナーがまだアクティブであることがわかります。

でももう監視できない

破壊後

// 破壊後

破壊されました（）{

console.log( '破壊されました');

コンソール.ログ(これ);

}

ウォッチャーの有効化ステータスが false になりました

破壊フェーズでは何が行われますか?

vm.$destroy() を呼び出す (破棄フェーズに入る)

beforeDestroy() フック関数を呼び出します (この時点では Vue インスタンスはまだ存在します。VM 上のモニター、サブコンポーネント、およびイベントリスナーはまだ存在しますが、使用できません。この時点でデータを変更しても再レンダリングされません)ページ）

サブコンポーネントとモニターをアンインストールし、イベントリスナーのバインドを解除します。

destroy() フック関数を呼び出します (この時点では Vue インスタンスはまだ存在しますが、スペースはまだ解放されていません。破棄後は、vm オブジェクト上のすべてのものがバインドされていないことを意味します)。

このステージにふさわしいもの

beforeDestroy: 破壊前の準備に適しています。