Vue生命周期详解

在看这篇文章之前，可以先看看vue:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

官网主要介绍了beforeCreate、created、beforeMount、mounted、beforeUpdate、update、befpreDestroy、destroyed八个阶段（其实还有active等阶段）。

下面我们通过一个组件的执行输出来搞清楚每个阶段发生了什么。

<template>
<div id="wer">
    <h1 @click="updateData">{{message}}</h1>
    <h2>{{helloCom}}</h2>
</div>
</template>
<script>
export default {
    data() {
      return{
          message: 'Vue的生命周期',
      }
    },
    computed: {
        helloCom(){
            return this.message + ' computed;';
        },
    },
    methods:{
        updateData(){
            this.message = "update message";
        }
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log( "el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined 
      console.log("message: " + this.message); //undefined 
      console.log("computed: " + this.helloCom); //undefined 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命周期
      console.log("computed: " + this.helloCom); // Vue的生命周期 computed
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("el     : " + (this.$el)); //undefined
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命周期
      console.log("computed: " + this.helloCom); // Vue的生命周期 computed
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("el     : " + this.$el); //[object HTMLDivElement] 
      console.log(this.$el); 
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); //Vue的生命周期
      console.log("computed: " + this.helloCom); // Vue的生命周期 computed
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("el     : " + this.$el);// [object HTMLDivElement] 
      console.log(this.$el);   
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); // Vue的生命周期
      console.log("computed: " + this.helloCom);// Vue的生命周期 computed
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("el     : " + this.$el);// [object HTMLDivElement] 
      console.log(this.$el); 
      console.log("data   : " + this.$data); //[object Object]
      console.log("message: " + this.message); // Vue的生命周期
      console.log("computed: " + this.helloCom);// Vue的生命周期 computed
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);    
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message); 
      console.log("computed: " + this.helloCom);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);  
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message)
      console.log("computed: " + this.helloCom);
    }
}
</script>
<style lang="stylus" scoped>

</style>