vue ライフサイクル フック フック関数の概要 (例付き)

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

Vue インスタンスのライフサイクルフック関数 (8)

1. beforeCreate

新しいコンポーネントを作成したばかりで、基本的にデータと実際の DOM にアクセスできません。 、これは役に立たないようです

2. created

データ属性には値が割り当てられていますが、ここでは初期データを取得できません。

##3. beforeMount

レンダリングの準備が完了しました。この時点でデータを変更しても、初期データは取得できません#。

## 4. マウントされた

## レンダリングを開始し、実際の DOM をレンダリングし、マウントされたフック関数を実行します。コンポーネントがページに表示され、データとイベントが DOM によって処理されました。ここで、実際の DOM 操作を実行するように変更できます。

5、beforeUpdate

コンポーネント、インスタンス データが更新される前に実行される関数、仮想 DOM は仮想 DOM を再構築します。最後の仮想 DOM 比較後に再レンダリングします。データを変更しないでください。そうしないと無限ループが発生します。

6、updated

更新後に実行される関数です。データを変更しないと無限ループが発生します。

7、 beforeDestroy

インスタンスが破棄される前に実行される関数、事後作業の実行、タイマーのクリア、命令バインドされていないイベントのクリアなど。

8、destroyed

例 破棄後に実行される関数は、その後の作業も行うことができます。

<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这样一个输出顺序：

これは、vue のような開発に angular を使用したことも含め、ライフ サイクル フック関数が実行されるおおよその順序です。独自のライフ サイクル フック関数もあります。

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

以上がvue ライフサイクル フック フック関数の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。