Lifecycle hooks

5087 ワード
ライフサイクルフック lifecycle Lifecycle Hooks ライフサイクル vue lifecycle テキストリンク
Vueインスタンスまたはコンポーネントを生成するときに、ライフサイクルと呼ばれる事前定義されたいくつかのフェーズが作成されます.つまり、Vueインスタンスが作成されると、消えるまで私たちの目の前に現れます.생성(create)、DOMにおける부착(mount)、업데이트(update)、および없어지는(destroy)4のプロセスが概ね存在する.
このプロセスでは、Vueは、各ステップでhookを使用するためのAPIを提供する.

作成→構成部品初期化手順

  • コンポーネントはDOMに追加する前に実行され、サーバレンダリングもHookをサポートします.
  • クライアント-サーバ側レンダリングで処理する必要がある場合は、この手順で実行する必要があります.
  • コンポーネントは、DOMに追加する前にDOMまたはthis.$にアクセスします.elは使用できません.

    • beforeCreate

  • を最初に実行したHook
  • vueインスタンスの初期化後に発生します.
  • データとイベント(element.on、element.on、element.on、element.once、element.off、element.off、element.emit)が設定されていない時点にアクセスできないため、エラーが発生しました.
    • export default({
  data: function(){
    return{
      title: 'Hello'
    }
  },
  beforeCreate: function(){
    console.log(this.title); // undefined
  }
})

    created

  • データとイベントがアクティブになり、アクセスできます.
  • 計算、メソッド、watchなどがアクティブになり、アクセスできます!
  • は、テンプレートおよび仮想DOMがマウントおよびレンダリングされていない状態のままです.
    • export default({
  data: function(){
    return{
      title: 'Hello'
    }
  },
  created: function(){
    console.log(this.title); // Hello
  }
})

    Mounted-DOM挿入手順

  • インストール手順は、初期レンダリングの前にコンポーネントに直接アクセスすることができる.
  • サーバレンダリングはサポートされていません.
    • この手順は、
  • でレンダーを開始する前にDOMを変更する場合に使用します.
  • コンポーネントの初期に設定すべきデータパッチは、作成フェーズを使用することが望ましい.

    • beforeMount

  • テンプレートとレンダリング関数のコンパイルが完了すると、最初のレンダリングの前に実行されます.
  • サーバ側レンダリングは呼び出されません.

    • mounted


    一般的に最も多く使われているのは
  • です.
  • this.$elを含むデータ、計算、メソッド、watchなどのすべての要素にアクセスできます.
  • 親と子供の関係では、親のフックは子供のフックより先に実行されません.

    • -diffと再レンダリングの関係を更新

  • コンポーネントで使用される反作用アトリビュートが変更されたり、何らかの理由で再レンダリングされたときに実行されたりします.
  • デバッグやプロファイルなど、コンポーネントが再レンダリングされる時点を理解する必要がある場合に使用できます.

    • beforeUpdated

  • コンポーネントで使用されるデータ値が変更され、DOMにこれらの変更を適用する必要がある場合、変更前に呼び出されます.
    • この値は、
  • の可変値を使用して仮想DOMをレンダリングする前に使用できます.

    • updated

  • コンポーネントのデータが変化し、再レンダリングが完了した後に実行されます.
  • DOMは更新が完了したので、DOMに依存する演算を行うことができる.

    • Destroy


    beforeDestroy

  • vueインスタンスは、削除される前に呼び出されます.
  • サーバをレンダリングするときに呼び出されません.

    • destroyed

  • vueインスタンスが削除された後に呼び出されます.
  • vueインスタンスのすべてのディレクトリはバインド解除され、すべてのイベントリスナーが削除され、すべてのサブインスタンスも削除されます.
    • 同時プログラミングの基礎4--同期コードブロック、同期方法、lock、デッドロック
    【Appium】複数デバイスの同時実行に関する問題のまとめ