Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

var vm = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        },
        beforeCreate(){
            console.log('beforeCreate:  
',this.$el+'
',this.message+'
',this.test+'
')
        },
        created(){
            console.log('created:  
',this.$el+'
',this.message+'
',this.test+'
')
        },
        mounted(){
            console.log('mounted:  
',this.$el+'
',this.message+'
',this.test+'
')
            this.message='更新message'
        },
        updated(){
            console.log('updated:  
',this.$el+'
',this.message+'
',this.test+'
')
        },
        beforeDestroy(){
            console.log('beforeDestory:  
',this.$el+'
',this.message+'
',this.test+'
')
        },
        destoryed(){
            console.log('destoryed:  
',this.$el+'
',this.message+'
',this.test+'
')
        },
        methods:{
            test(){
                return 12;
            }
        }
      });
      setTimeout(() => {
          vm.$destroy()
      }, 3000);

运行显示打印结果如下：

从上边的打印结果可以看到

1.beforeCreate钩子函数运行时，vue实例的挂载元素$el，数据data，方法，都为undefined，还未初始化。

2. created钩子函数运行时，vue实例的挂载元素$el还没有，data数据和方法已初始化

3.mounted钩子函数运行时，vue实例的挂载元素$el，data数据和方法已经初始化完成

4.updated钩子函数，是在数据data更新的时候触发

5.beforeDestory钩子函数，是在调用vue实例的$destory()方法之后触发，此时$el,data数据和方法还都存在