Vue的生命周期

什么是Vue的生命周期？
简单来说，就是实例从创建开始，到销毁结束的整个过程，包括实例的创建、初始化数据、模板编译、挂载DOM、渲染、更新、渲染、到销毁几个过程。Vue为各个过程提供了对应的生命周期的钩子函数，方便我们在各个阶段做出相应的操作。

所谓的实例指的是什么？
如下图所示，变量 app 就是通过Vue()这个构造函数new出来的实例对象，通过el属性将该实例对象挂载到具体的DOM元素上（此时的DOM元素就是id=app的div）

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

<script>
// app就是通过构造函数Vue() new 出来的实例对象
var app = new Vue({
    //  el 属性将app这个实例对象挂载到DOM元素 id = app上
    el: "#app"，
    data: () {
          msg: "Hello  Vue ！"
     }，
    methods: {
          show() {
             console.log("执行了methods中的show方法。。。。");
          }
     },
     beforeCreate () {
            // 实例在创建之前执行该钩子函数
            // 数据未初始化，el属性还不可见，还不能获取DOM元素，相关的render函数还未执行，这时如果访问show方法会报错。
            console.log(this.$el);  // undefined
            console.log(this.$data);  // undefined
            console.log(this.msg);  //  undefined
     },
     created () {
            // 实例在创建之后执行该钩子函数
            // 数据已被初始化，el属性还不可见，还不能获取DOM元素，相关的render函数还未执行，可以访问show方法。
            console.log(this.$el);  // undefined
            console.log(this.$data);  // {__ob__: Observer} 对象
            console.log(this.msg);  //  Hello  Vue ！
     }
     beforeMount () {
            // 实例在挂载到DOM元素之前执行该钩子函数
            // el属性不可见，模板编译已完成，但是还没有渲染到html中，此时页面中显示的还是一些模板字符串，并不是具体的data中的值
            console.log("挂载前");
            console.log(this.$el); // undefined
            console.log(this.$data); // {__ob__: Observer} 对象
            console.log(this.msg); //  Hello  Vue ！
      },
      mounted () {
            // 实例完全挂载后执行该钩子函数
            // 表示  内存中编辑完成的模板字符串已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
            console.log("挂载后");
            console.log(this.$el); // <div id="app" >Hello Vue ！</div>
            console.log(this.$data);// {__ob__: Observer} 对象
            console.log(this.msg);//  Hello  Vue ！
      },
      beforeUpdate () {
             // 页面中任何数据更新之前都会执行该钩子函数，页面数据还是之前的数据
            console.log("更新前");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.msg);
      },
      updated () {
            // 页面中任何数据更新之后都会执行该钩子函数，页面数据是更新后的数据
            console.log("更新后");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.msg);
      },
      beforeDestroy () {
            // 实例被销毁之前执行该钩子函数
            // 此时实例还完全可用
            console.log("销毁前");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.msg);
      },
      destroyed () {
            // 实例销毁之后执行该钩子函数
            // 此时实例完全不可用，app这个实例下的所有事件、方法和对应的子实例都会被销毁
            console.log("销毁后");
            console.log(this.$el);
            console.log(this.$data);
            console.log(this.msg);
      }
});
</script>