ホームページ > ウェブフロントエンド > jsチュートリアル > vue ライフサイクル フック フック関数の概要 (例付き)

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

不言
リリース: 2018-11-27 16:09:49
転載
3230 人が閲覧しました

この記事では、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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<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 サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
css - hexo+github ビルド ブログ
から 1970-01-01 08:00:00
0
0
0
github - git checkout -f の問題
から 1970-01-01 08:00:00
0
0
0
github - gitプッシュエラー
から 1970-01-01 08:00:00
0
0
0
git、github、svn の違い。
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート