vue のライフサイクルとフック機能

この記事では主に Vue のライフ サイクルとフック機能について紹介します. Vue インスタンスには完全なライフ サイクルがあります. つまり, 最初から作成, データの初期化, テンプレートのコンパイル, Dom のマウント, レンダリング.必要な方 参照できます

1.ライフサイクルとは

Vue インスタンスには完全なライフ サイクル、つまり、 Dom作成の最初から、データの初期化、テンプレートのコンパイル、マウント、レンダリング → 更新 → レンダリング、アンロードなどの一連のプロセスがあります。これを Vue のライフ サイクルと呼びます。 . 平たく言えば、Vue インスタンスの作成から破棄までのプロセス、つまりライフサイクルです。

Vue のライフサイクル全体で、イベントがトリガーされたときにメソッドを登録できる一連のイベントを提供し js 、独自の登録済み js メソッドで全体的な状況を制御できるようにします. これらのイベント応答メソッドの直接的なポイントは、の インスタンスthis です . vue .

2. vue のライフサイクル

フック関数とも呼ばれるライフサイクル関数 (ライフサイクルフック === ライフサイクル関数 === ライフサイクルイベント)

通常、vue のライフサイクル関数はペアで表示されます。それではペアで比較してみましょう。

覚えておくべき 10 のライフサイクル関数! 具体的な使い方！

3.ライフサイクルフック機能

機能:自動的に呼び出されるものについては、それらの呼び出しの時間ノードは最初と最後です。

公式サイトで写真を撮る：

 

 

beforeCreate --- vueインスタンス「作成前」、注意：この関数では、vue内のデータセンターのデータを読み取ることができません。

<script src="./js/vue.js"></script>
  <script>
      let vm = new Vue({
          el:'#app',
          data:{
              name:"哈哈哈",
              num:1111
          },
          methods: {

          },

          // vue实例创建之前
          beforeCreate(){
              console.log('beforeCreate');
              console.log(this.name);
          }
  </script>

出力データセンターの名前を読み取ることができません:

created --- vue实例"创建后",注意：在这个函数中，可以识别 到 vue中data数据中心的数据
  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // vue实例创建之后
            created(){
                console.log("created");
                console.log(this.name);
            }
        })
    </script>

結果を見る:

beforeMount --- DOMthis.$el をマウントする前に --- このときの $el は「仮想」DOM ノードです

ビュー レイヤーでラベルをレンダリングします。

  <div id="app">
        <p>{ {name}}</p>
        <p>{ {num}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"哈哈哈",
                num:1111
            },
            // dom挂载之前
            beforeMount(){
                console.log("beforeMount");
                   //查看dom元素
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

dom マウント前の出力結果:

mounted ---DOM挂载之后    this.$el---此时的$el为“真实的”DOM节点

   <script src="./js/vue.js"></script>
   <script>
       let vm = new Vue({
           el:'#app',
           data:{
               name:"哈哈哈",
               num:1111
           },
           // dom挂载之后
           mounted(){
               console.log("mounted");
               console.log(document.body.querySelector("#app").innerHTML);
           }
       })
   </script>

出力を表示:

•  beforeUpdate --- データ更新前 (---- ビューレイヤーのデータ変更前後)
• updated --- データ更新後 (------ ビューレイヤーのデータ変更前後)

在视图层通过 点击让 num 的数值发生改变来模拟数据更新，查看结果：

  <div id="app">
      <p id="num">{ {num}}</p>
      <button @click="num++">点击数据更新(num+1)</button>
  </div>
// 数据更新前
          beforeUpdate(){
              console.log("beforeUpdate--数据更新前");
              // 查看dom元素
              console.log(document.body.querySelector("#num").innerHTML);
          },
          // 数据更新后
          updated(){
              console.log("updated--数据更新后");
              // 查看dom元素
              console.log(document.body.querySelector("#num").innerHTML);
          }

此时数据无变化时，在控制台是看不到效果的，当我们点击按钮后：