前言

    在上一篇中，我们对平时进行vue开发中遇到的常用指令进行归类说明讲解，大概已经学会了怎么去实现数据绑定，以及实现动态的实现数据展示功能，运用指令，可以更好更快的进行开发。而在这一篇中，我们将通过实例，探究vue的生命周期。

    万物皆有灵，世间万物都拥有灵魂，小到山河湖海，花草树木，蚂蚁到人类，以及所有的动植物，大到地球星空和宇宙，都拥有灵魂，可以说他们都是有生命的，只是他们的生命形态是我们人类所不能理解的存在。在生产中，生命周期通俗来讲，就是从自然中来回到自然中去的全过程，也就是从采集材料设计，到加工生产后流通使用的过程，以及产品报废，进而回归大自然的过程，这整个过程就是一个完整的生命周期。因此，在开发应用项目的中，从启动页面的加载，页面渲染到销毁，也算是生命周期。Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。这里的“钩子”可以这么理解，就是在每一个阶段用钩子钩住，并进行响应的操作。 

     学习生命周期，可以使我们更好的理解Vue的生命机制，通过了解每个阶段的钩子，可以更好的实现我们的业务代码，处理更加复杂的业务逻辑。

 内容

    Vue每一个组件都有属于自己的生命周期，从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等这就是一个组件的生命周期。

    在整个生命周期内，总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

 执行顺序

    *图片来自官网，只要你理解了这张图，也就对Vue的生命周期有了一个大致的了解。

    在谈到Vue的生命周期的时候，我们首先需要创建一个实例：

 开始

一、创建前/后：

1.beforeCreate-创建前 ：实例创建前：这个阶段实例的data、methods是读不到的（el 和 data 并未初始化）

  var app = new Vue({       el: '#app',       data: {           message : "这是艾三元的主页"        },        beforeCreate: function () {                 console.group('beforeCreate 组件刚刚被创建,组件属性计算前状态===============》');                console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined               console.log("%c%s", "color:red","data   : " + this.$data); //undefined                console.log("%c%s", "color:red","message: " + this.message)  //undefined        }, })

2.created-创建完成 ：实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染（完成了data数据的初始化，el没有）

 var app = new Vue({       el: '#app',       data: {           message : "这是艾三元的主页"        },         created: function () {             console.group('created 组件创建完毕,属性已经绑定但dom还未生成的状态===============》');             console.log("%c%s", "color:red","el     : " + this.$el); //