Vueのライフサイクルフック

最初に主要なライフサイクルを紹介します

beforeCreate：インスタンスが初期化
     された後、呼び出しが作成されました：インスタンスが作成された後、すぐに呼び出され、マウントフェーズはまだ開始されていません

 beforeMount：マウントの開始前に呼び出され、renderが初めて
    呼び出されます（レンダリング）mounted：インスタンスがマウントされた後に呼び出されます
注：試行全体がレンダリングされた後、mount内でvm。$ nextTickを使用します

 beforeUpdate：データが更新されたときに呼び出されます;追加されたイベントリスナーを手動で削除します
     updated：データが更新された後に呼び出されます;
注：試行全体がレンダリングされた後、更新内でvm。$ nextTickを使用します

 actived：キープアライブによってキャッシュされたコンポーネントがアクティブ
化されたときに呼び出されます非アクティブ化：キープアライブによってキャッシュされたコンポーネントが非アクティブ化されたときに呼び出されます
このフックはサーバー側のレンダリングデバイスでは呼び出されません

 beforeDestroy：インスタンスが破棄
    される前に呼び出されますdestroy：インスタンスが破棄された後に呼び出されます
このフックはサーバー側のレンダリングデバイスでは呼び出されません

いくつかのライフサイクルの内容を見てみましょう

<div id="app">{
   
   {name  + age + msg}}</div>


<script>
    var vm = new Vue ({
        el:"#app",
        data:{
            name : "生命周期钩子 ",
            age :23,
            msg: " 异常优秀"
        },
        beforeCreate:function(){          //初始化之后调用
            console.log("beforeCreate");
            console.log(this);           //Vue 本身,生命周期中所有的 this 都是Vue 本身
            console.log(this.$data);     //undefined
        },
        created:function(){             //实例创建完成后调用，data !== undefined
            console.log("created");
            console.log(this.$data);    //Object
            console.log(this.$el);      //undefined
        },
        beforeMount:function(){         //实例挂载 之前 被调用
            console.log("beforeMount");
            console.log(this.$data);    //Object
            console.log(this.$el);      //body 中标签的模样
        },
        mounted:function () {           //实例挂载 之后 被调用
            console.log("mounted");
            console.log(this.$data);    //Object
            console.log(this.$el);      //加了内容的标签
        },
        beforeUpdate:function () {
            console.log("beforeUpdate");
        },
        updated:function () {
            console.log("updated");
        }
    })
</script>