Vue.jsライフサイクルフック

ライフサイクルフックは、深刻なコンポーネントの重要な部分です。 多くの場合、コンポーネントが作成、DOMに追加、更新、または破棄されたときを知る必要があります。 ライフサイクルフックは、選択したライブラリがバックグラウンドでどのように機能するかを示しています。 彼らはしばしば初心者の不安や不安を引き起こします。 幸い、フックの仕組みを理解するのは簡単です。図を参照してください。

作成（初期化）

コンポーネントの最初に作成フックがあります。 コンポーネントをDOMに追加する前でもアクションを実行できます。 他とは異なり、作成フックはサーバー側のレンダリング中にも実行されます。

クライアントおよびサーバー側でのレンダリング中にコンポーネントで何かを構成する必要がある場合は、作成フックを使用します。 これらのフック内では、DOMまたはマウント要素（ this.$el



）にアクセスできません。

beforeCreate

beforeCreate



は、コンポーネントの初期化中に直接実行されます。 データはまだ反応しておらず、イベントは構成されていません。

例：

 ExampleComponent.vue <script> export default { beforeCreate() { console.log('Nothing gets called before me!') } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

作成された

created



フックでは、リアクティブデータとアクティブイベントにアクセスできます。 テンプレートと仮想DOMはまだマウントまたはマウントされていません。

例：

 ExampleComponent.vue <script> export default { data() { return { property: 'Blank' } }, computed: { propertyComputed() { console.log('I change when this.property changes.') return this.property } }, created() { this.property = 'Example property update.' console.log('propertyComputed will update, as this.property is now reactive.') } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

埋め込み（DOMペースト）

取り付けフックは、最も一般的に使用されるものの1つです。 これらを使用すると、最初のレンダリングの直前または直後にコンポーネントにアクセスできます。 ただし、これらのフックはサーバー側のレンダリング中には実行されません。

コンポーネントDOMを編集する必要がある場合、または初期レンダリングの直前または直後にアクセスする必要がある場合に使用します。

初期化中にコンポーネントのデータを取得する必要がある場合は、これらのフックを使用しないでください 。 この場合、特にサーバー側のレンダリング中にこのデータが必要な場合は、 created



（またはkeep-alive



コンポーネントの場合はkeep-alive



created + activated



を使用してください。

マウント前

beforeMount



は、初期レンダリングの前に実行され、テンプレートまたはコンパイル関数をコンパイルした後にも実行されます。 このフックを使用する必要はおそらくないでしょう。 サーバー側のレンダリング中には呼び出されないことに注意してください。

例：

 ExampleComponent.vue <script> export default { beforeMount() { console.log(`this.$el doesn't exist yet, but it will soon!`) } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マウントされた

mounted



フックでは、リアクティブコンポーネント、テンプレート、およびレンダリングされたDOMへのフルアクセスを取得します（ this.$el



を介しthis.$el



）。 Mounted



は、最も人気のあるライフサイクルフックです。 通常は、Vue以外のライブラリを統合するために、コンポーネントのデータを取得し（代わりにcreated



使用）、DOMを変更するために使用created



ます。

例：

 ExampleComponent.vue <template> <p>I'm text inside the component.</p> </template> <script> export default { mounted() { console.log(this.$el.textContent) // I'm text inside the component. } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

更新（差分と再描画）

更新フックは、コンポーネントで使用されるリアクティブプロパティが変更されたとき、または他の何かが再描画につながるときに呼び出されます。 これらのフックにより、コンポーネントの「トラッキング-コンピューティング-レンダリング」サイクルにアクセスできます。

デバッグやプロファイリングなど、コンポーネントの再描画について学習する必要がある場合に使用します。

コンポーネントのリアクティブプロパティの変更について知る必要がある場合は使用せず 、代わりに計算プロパティまたは「 ウォッチャー 」を使用します。

beforeUpdate

beforeUpdate



は、コンポーネントのデータと更新サイクルの開始を変更した後、DOMにパッチを適用して再描画する直前に実行されます。 このフックを使用すると、コンポーネントが描画される前に、コンポーネント内のリアクティブデータの新しい状態を取得できます。

例：

 ExampleComponent.vue <script> export default { data() { return { counter: 0 } }, beforeUpdate() { console.log(this.counter) // Logs the counter value every second, before the DOM updates. }, created() { setInterval(() => { this.counter++ }, 1000) } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

更新しました

updated



フックは、コンポーネント内のデータを変更し、DOMを再描画した後に呼び出されます。 プロパティを変更した後にDOMにアクセスする必要がある場合、このようなフックはこれを行うための最も安全な場所です。

例：

 ExampleComponent.vue <template> <p ref=”dom-element”>{{counter}}</p> </template> <script> export default { data() { return { counter: 0 } }, updated() { // Fired every second, should always be true console.log(+this.$refs['dom-element'].textContent === this.counter) }, created() { setInterval(() => { this.counter++ }, 1000) } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

破壊

破壊フックを使用すると、コンポーネントの破壊後に、たとえば分析のためにデータを整理したり送信したりすることができます。 これらのフックは、メンバーが削除され、DOMから削除されると起動します。

beforeDestroy

beforeDestroy



はインストールの直前に実行されます。 コンポーネントはまだ完全に機能しています。 イベントまたはリアクティブサブスクリプションをクリアする必要がある場合は、 beforeDestroy



がbeforeDestroy



です。

例：

 ExampleComponent.vue <script> export default { data() { return { someLeakyProperty: 'I leak memory if not cleaned up!' } }, beforeDestroy() { // Perform the teardown procedure for someLeakyProperty. // (In this case, effectively nothing) this.someLeakyProperty = null delete this.someLeakyProperty } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

破壊された

destroyed



フックに到達するまでに、コンポーネントの残りはほとんどありません。 添付されたものはすべて既に破壊されています。 最後のクリーンアップにフックを使用するか、または卑劣な静かな男のように、コンポーネントの破壊についてリモートサーバーに通知できます。 <_<

例：

 ExampleComponent.vue <script> import MyCreepyAnalyticsService from './somewhere-bad' export default { destroyed() { console.log(this) // There's practically nothing here! MyCreepyAnalyticsService.informService('Component destroyed. All assets move in on target on my mark.') } } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他のフック

他に、 activated



とdeactivated



activated



2つのフックがあります。 これらはすでに、この記事の範囲外のkeep-alive



コンポーネントを対象としています。 これらのハックにより、 <keep-alive></keep-alive>



タグでラップされたコンポーネントが含まれているかどうかを判断できると言えば十分です。 これらを使用して、コンポーネントのデータを取得したり、状態の変更を処理したりできます。 これらのハックはcreated



およびbeforeDestroy



ように動作しますが、コンポーネントを完全に再構築する必要はありません。