ライフサイクルフック

このチュートリアルでは、学習し、Vueの理解を得る.ライフサイクルフック.また、どのようにコンポーネントが作成され、舞台裏で破壊されるかについての詳細な理解を得るでしょう.
ライフサイクルフックは、実質的にすべてのフロントエンドのフレームワークへのエントリポイントであり、あなたのコンポーネントが作成され、マウントされ、更新され、破壊されたときに良い理解を持って、ライブラリの反応性を理解するために不可欠です.
Vueにおけるライフサイクルフックの理解JSはかなり簡単です.下の図はVueの完全ライフサイクルのイラストです.jsコンポーネント.

どのようにライフサイクルのフックは、vue templatesのコンパイルのさまざまな段階で変更されています.
Vueによって.JSドキュメントの各Vueインスタンスは、作成時に一連の初期化手順を実行しますたとえば、データの監視、テンプレートのコンパイル、DOMへのインスタンスのマウント、データの変更時にDOMを更新する必要があります.途中で、それはまた、特定の段階で独自のコードを追加する機会をユーザーに与えるライフサイクルのフックと呼ばれる関数を実行します.

Vueはフックをつくりました

フックを代弁する

Beforereated hookは初期化段階での最初のフックであり、インスタンスが作成される前にトリガされます.したがって、この状態では反応性は設定されません.これは、データにアクセスしたり更新したりできないことを意味します.あなたのバックエンドAPIから来るデータがあれば、bederereatedされたフックの中でそれを呼ぶことは未定義で戻ります.例を見よ.

<script>
  export default {
    beforeCreated(){
      console.log(data);
      //This will return undefined 
    }
  }
</script>

フックを作成

コンポーネントが作成されると、作成されたフックがトリガーされます.ここでコンポーネントのデータにアクセスでき、反応性が作成されます.しかし、このフックの中には、テンプレートと仮想DOMはまだ実装されていません.以下の例を参照ください.

<script>
  export default {
    data(){
      return{
        message: "I am learning Vue lifecycle hooks"
      }
    },

    computed:{
      messageChange(){
        console.log(`This will look up to ${this.message} for changes`);
        return this.messages 
      }
    },

    created(){
      this.message = "now the message is changed";
      console.log(`messageChange will be updated since reactivity is present`);
    }
  }
</script>

Vueマウントフック

BeforeMountフック

BeforeMountフックは、仮想DOMの初期レンダリングとテンプレートまたはレンダリング関数のコンパイル前にトリガされます.サーバー側のレンダリング中にこのフックを使用することは推奨されません.例を見てください.

<script>
  export default {
    beforeMount(){
      console.log(`${this.el} is about to be mount`);
    }
</script>

マウントフック

マウントされたフックの完全な反応性が確立され、テンプレート、およびDOM(via . this . $)をレンダリングします.
取り付けられたフックは、最も使用されるライフサイクルフックであると報告されます.ほとんどの人は、コンポーネントのデータを取得するために使用します.例を見てください.

<template>
  <p>Text inside a component</p>
</template>

<script>
  export default {
    mounted(){
      console.log(this.$el.textContent);
      //This will return the text from the template 
    }
</script>

Vue更新フック

更新フックは、コンポーネントの変更によって使用される無効なプロパティ、またはユーザー入力を通じて再描画されるたびにトリガされます.フックを更新すると、コンポーネントのウォッチCompute Renderサイクルにフックできます.
コンポーネントを再レンダリングするときに知りたい場合は、使用できます.無効成分の状態を対象とするには、代わりに計算されたプロパティまたはウォッチャーをください.

更新前フック

コンポーネントが再描画される前に、前の更新フックがトリガされ、コンポーネント内のデータが変更されたときに開始されます.これは、反応コンポーネントの状態を追跡するのに良い場所です.例を見てください.

<script>
  export default {
    data(){
      n: 1,
    },

    beforeUpdate(){
      console.log(this.n) //sets the value of n to 300 after 1,500 seconds;
    },

    created(){
      setTimeOut(() => {
        this.n = 300
      }, 1500);
    }
</script>

更新フック

更新されたフックは、データ変化の後、仮想DOMが再レンダリングされて、パッチをとられた後に呼ばれます.このフックが呼び出されると、コンポーネントのDOMが更新されますので、ここでDOM依存演算を実行できます.しかし、ほとんどの場合、フック内の状態を変更するのを避けるべきです.状態変化に反応するために、通常、計算されたプロパティまたはウォッチャーを使用する方が良いです.

<template>
  <p ref="dom-element">{{name}}</p>
</template>

<script>
export default {
  data() {
    return {
      name: "Emmanuel Etukudo"
    }
  },

  updated() {
    // Track update on the DOM element.
    console.log(this.$refs['dom-element'].textContent === this.name)
  },

  created() {
    setTimeout(() => {
      this.name = "John Doe"
    }, 1000)
  }
}
</script>

破壊フック

破壊フックは、コンポーネントベースのイベントを削除するなど、コンポーネントが破壊されたときにアクションを実行するために使用されます.コンポーネントがDOMから削除されるとき.
フックを破壊する前に
VEEインスタンスが破壊される前に、前破壊フックが引き起こされます.この段階で、インスタンスはまだ完全に機能しています.

<script>
export default {
  data() {
    return {
      accessToken: localStorage.getItem('accessToken'),
    }
  },


  beforeDestroy() {
    // Remove the token.
    localStorage.removeItem('accessToken');
  },  
}
</script>

破壊フック

破壊的なフックは、Vueインスタンスが破壊された後に引き起こされます.このフックが呼び出されると、Vueインスタンスのすべてのディレクティブはunboundされ、すべてのイベントリスナーが削除され、すべての子Vueインスタンスも破棄されました.

<script>
export default {
  destroyed() {
    console.log(this) // Nothing is left to log
  }
}
</script>

この記事でキャプチャされていない2つの他のフックがあります生きているフックのアクティブ＆非活性化されます.Vueドキュメントのウェブサイトでそれらを見ることができます.読んでいただきありがとうございます、私はあなたから読んでみたいあなたのコメントをドロップします.