Vue生命周期

Vue生命周期图示

八个阶段：

阶段	描述
beforeCreate	创建前，可在这增加loading事件
created	创建完毕后，可在这结束loading，做一些初始化，实现函数自执行
beforeMount	挂载前
mounted	挂载结束后
beforeUpdate	更新前
updated	更新完成
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

实例演示

<div id="app">
  <p>{{ msg }}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
      msg : "hello world"
    },
    beforeCreate: function () {
      console.group('beforeCreate');
      console.log("%c%s", "color:red" , "el     : " + this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg)
    },
    created: function () {
      console.group('created');
      console.log("%c%s", "color:red","el     : " + this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.msg);
    },
    beforeMount: function () {
      console.group('beforeMount');
      console.log("%c%s", "color:red","el     : " + (this.$el)); 
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg); 
    },
    mounted: function () {
      console.group('mounted');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.msg); 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg);
    },
    updated: function () {
      console.group('updated');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg);
    },
    destroyed: function () {
      console.group('destroyed');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.msg)
    }
  })

复制上面代码编译后分析：

beforecreated阶段， el 和 data 并未初始化 ；

created阶段 ，data 数据已初始化，el未完成初始化；

beforeMount阶段， el 和 data均已初始化，可以看到此时el还是 {{msg}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了，到后面mounted挂载的时候再把值渲染进去；

mounted ：完成挂载，el值已经渲染出来了；

控制台继续updata操作：

可以看出来，data数据变化后进行了updata操作

app.msg = "sweet cat"

控制台继续destroy 操作：

app.$destroy();