vue ライフサイクルフック関数の簡単な紹介 (コード例)

この記事では、vue ライフサイクル フック関数についての簡単な紹介 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

画像から始めましょう

次の画像は公式に表示されるライフサイクル図です

Vue のライフサイクル フック機能インスタンス ( 8)
1. beforeCreate
新しいコンポーネントを作成したところ、データと実際の dom にアクセスできなくなりました。
2 data 属性には値が割り当てられており、データの変更は更新をトリガーしません。
3 beforeMount
render で仮想 dom をレンダリングする準備ができました。この時点でデータを変更しても更新はトリガーされません。ここで初期データを取得できます。
4. レンダリングを開始し、実際の DOM をレンダリングし、マウントされたフック関数を実行します。コンポーネントがページに表示されます。 、データとイベントは DOM によって処理されました。ここで、実際の DOM 操作を実行するように変更できます。
5. beforeUpdate
コンポーネントは、仮想 DOM が更新される前に実行される関数であり、仮想 DOM と比較した後に再レンダリングされます。最後の仮想 DOM。データを変更しないでください。そうしないと無限ループが発生します。
6. updated
更新後に実行される関数です。データを変更しないと、無限ループが発生します。
7.インスタンスが破棄される 実行された関数、アフターマス作業の実行、タイマーのクリア、命令バインドされていないイベントのクリアなど。
8. destroy
インスタンスの破棄後に実行される関数は、アフターマス作業も行うことができます。

<template>
  <div class="hello">
   Hello World!
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  beforeCreate: function() {
    console.log("data属性光声明没有赋值的时候");
  },
  created: function() {
    console.log("data属性完成了赋值");
  },
  beforeMount: function() {
    console.log("页面上的{{name}}还没有被渲染成真正的数据");
  },
  mounted: function() {
    console.log("页面上的{{name}}被渲染成真正的数据");
  },
  beforeUpdate: function() {
    console.log(" 数据（data属性）更新之前会执行的函数");
  },
  updated: function() {
    console.log("数据（data属性）更新完会执行的函数");
  },
  beforeDestroy: function() {
    console.log("实例被销毁之前会执行的函数");
  },
  destroyed: function() {
    console.log("实例被销毁后会执行的函数");
  }
};
</script>
<style scoped>
</style>

console このような出力シーケンス:

これは、ライフ サイクル フック関数が実行される順序です。これには、angular を使用したことも含まれます。以前の vue と同様に独自のライフサイクルフック機能も備えています。

ライフサイクルは、コンポーネントの作成から初期化、破棄までのプロセスです。このプロセスでは、これらのライフサイクルフック関数を使用することで、コンポーネント全体をより便利に操作できます。

以上がvue ライフサイクルフック関数の簡単な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。