ライフサイクルとフック関数

各vueインスタンスは、作成前に、インスタンスにデータ観測(data observer)、テンプレートのコンパイル、インスタンスのDOMへのマウント、データ更新およびDOMレンダリングなどの一連の初期化プロセスを必要とします.create(作成):beforeCreateが作成される前;created作成完了mount(マウント):beforeMount;mounted update(更新):beforeUpdate;Updated destory(破棄):beforeDestory;destoryedフック関数:インスタンスのライフサイクル中に自動的にいくつかの関数が実行されます.これらの関数はフック関数フック関数と呼ばれ、論理的な機会構文とテストをカスタマイズします.

beforeCreate: function(){
        //el vue      dom  ，    
        // $data vue       ，       $data        
        console.group("   beforeCreate-------------------------");
        console.log("el:------"+this.$el);     // el:------undefined
        console.log("data:------"+this.$data);  //  data:------undefined
        console.log("msg:------"+this.msg);  //  msg:------undefined
    },
    created: function(){
        console.group("    created-------------------------");
        console.log("el:------"+this.$el);  //el:------undefined
        console.log("data:------"+this.$data); // data:------[object Object]       
        console.log("msg:------"+this.msg);  // msg:------hello vue
    },  
    beforeMount: function(){
        console.group("   beforeMount-------------------------");
        console.log("el:------"+this.$el); //      div       
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    mounted: function(){
        console.group("   mounted-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    beforeUpdate: function(){  //  console           
        console.group("     beforeUpdate-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    updated: function(){
        console.group("     Update-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    beforeDestory: function(){  // $destory          。              。          
        console.group("   beforeDestory-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    },
    destoryed: function(){
        console.group("    destoryed-------------------------");
        console.log("el:------"+this.$el);
        console.log("data:------"+this.$data);     
        console.log("msg:------"+this.msg);
    }