Vueのライフサイクルフック機能とは

vue では、ライフ サイクル フック関数は、DOM の作成および更新のプロセスを経るときにライフ サイクルで実行されるいくつかの関数を指します。vue コンポーネントは、これらの関数内で作成および宣言できます。

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue のライフサイクル フック関数とは

各 Vue インスタンスは一連の初期化ステップを経ます。作成時のデータの設定から、テンプレートのコンパイル、DOM へのインスタンスのロード、そして最後にデータ変更時の DOM の更新まで。このプロセスは、Vue インスタンスのライフ サイクルと呼ばれます。デフォルトでは、DOM の作成および更新のプロセスを実行するときに、いくつかの関数がインスタンス内で実行されます。これらの関数内で、Vue コンポーネントが作成され、宣言されます。これらの関数は呼び出されます。ライフサイクルフック。

Vue には 8 つのライフサイクル メソッドがあります:

• Before create

• Created

• マウント前

• マウント済み

• 更新前

• 更新済み

破棄される前
破棄された
この記事では、これらすべてのフックについて学び、それぞれのケースについて学びます。それぞれの段階で。

この記事では、src フォルダー内のコンポーネント フォルダーにあるテスト コンポーネントを使用します。次のようになります:

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

このチュートリアルでは、スクリプト セクションはさまざまなフックの場合に個別に使用されます。

beforeCreate()

これは、Vue.js で呼び出される最初のライフサイクル フックであり、Vue インスタンスが初期化された直後に呼び出されます。

<script>
export default {
  name: &#39;Test&#39;,
  beforeCreate() {
    alert(&#39;beforCreate hook has been called&#39;);
    console.log(&#39;beforCreate hook has been called&#39;);
  }
}
</script>

開発環境でプログラムを実行して、インターフェイスを検査できます。

npm runserve

コンポーネントをロードする前に、ライフサイクルフックに記述されたアラートステートメントが最初に実行されることに注意してください。これは、Vue エンジンがアプリケーション コンポーネントを作成する前に呼び出されたときの関数の動作とまったく同じです。この時点では、beforeCreateの段階であり、計算されるプロパティ、オブザーバー、イベント、データプロパティ、オペレーションなどがまだ設定されていません。

created()

ご想像のとおり、これは beforeCreated フックの直後に呼び出される 2 番目のライフサイクル フックです。この段階では、Vue インスタンスが初期化され、計算されたプロパティ、オブザーバー、イベント、データ プロパティ、および後続の操作がアクティブ化されています。

<script>
export default {
  name: &#39;Test&#39;,
  data() {
    return {
      books: 0
    }
    },
  created() {
    alert(&#39;Created hook has been called&#39;);
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>

プログラムを実行すると、データ型が表示されることがわかります。 beforeCreated フェーズでは、その時点で発生するアクティベーションがまだ発生していないため、これは不可能です。ただし、この段階では Vue インスタンスがインストールされていないため、ここで DOM を操作することはできません。要素のプロパティはまだ使用できません。

beforeMount()

これは、インスタンスが DOM にマウントされる前の瞬間です。テンプレートとスコープ指定されたスタイルはここでコンパイルされますが、DOM を操作することはできません。 、要素のプロパティはまだ利用できません。

<script>
export default {
  beforeMount() {
    alert(&#39;beforeMount is called&#39;)
  }
}
</script>

mounted()

これは、beforeMounted の後に呼び出される次のライフサイクル フックです。インスタンスがインストールされた直後に呼び出されます。これで、アプリ コンポーネントまたはプロジェクト内の他のコンポーネントを使用できるようになります。データをテンプレートに適合させたり、DOM 要素をデータが埋め込まれた要素に置き換えたりするなどの操作を実行できるようになり、要素の属性も利用できるようになりました。

<script>
export default {
  mounted() {
    alert(&#39;mounted has been called&#39;); 
   }
}
</script>

これは、Vue CLI を使用して作成されたプロジェクトのデフォルトの場所です。これは、最初に見たように、インストールが main.js ファイルですでに行われているためです。インスタンスがデフォルトですでにインストールされているため、他のフックを使用できない場合があるのはこのためです。

beforeUpdate()

DOM で更新する必要があるデータをここで変更します。この段階は、イベント リスナーの削除などの変更を加える前のあらゆるロジックに適しています。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
 },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

最初は DOM に関する歓迎のコメントがありますが、マウント フェーズ (DOM を操作できる) 中にデータが変更されるため、変更の前に beforeUpdate アラートが表示されます。

updated()

このライフサイクル フックは、DOM の更新直後に呼び出されます。beforeUpdate フックが呼び出された後に実行されます。ここで DOM 関連の操作を実行することは可能ですが、Vue はすでにこれ専用のプラットフォームを提供しているため、このフック内で状態を変更することはお勧めできません。

<template>
 <div> {{hello}}
 </div>
</template>
<script>
 export default {
  name: &#39;Test&#39;,
  data() {
   return {
    books: 0,
    hello: &#39;welcome to Vue JS&#39;
   }
  },
beforeUpdate(){
 alert(&#39;beforeUpdate hook has been called&#39;);
},
updated(){
 alert(&#39;Updated hook has been called&#39;);
},
mounted(){
 this.$data.hello= &#39;lalalalallalalalalaalal&#39;;
 }
}
</script>

beforeDestroy()

この Vue ライフサイクル フックを呼び出すタイミングは、Vue インスタンスが破棄される前です。インスタンスとすべての関数はそのままで、ここで動作します。 。この段階では、リソース管理、変数の削除、コンポーネントのクリーンアップを実行できます。

<script>
export default {
name: &#39;Test&#39;,
 data() {
    return {
      books: 0
    }
  },
  beforeDestroy() {
    this.books = null
    delete this.books
  }
}
</script>

destroyed()

これは Vue ライフサイクルの最終段階であり、すべての子 Vue インスタンス、イベント リスナー、すべての命令、およびlike この段階ではバインドが解除されています。オブジェクトに対して destroy を実行した後にこれを呼び出します。

<script>
export default {
  destroyed() {
    this.$destroy() 
    console.log(this)
  }
}
</script>

プログラムを実行してコンソールを見ても、何も表示されません。

[関連する推奨事項:「vue.js チュートリアル 」]

以上がVueのライフサイクルフック機能とはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。