Vue的生命周期

生命周期就是一个组件实例化从创建开始，一直到结束，整个过程就是它的生命周期。在生命周期中会涉及到很多的方法，学习生命周期第一可以找到项目中的错误，第二可以满足需求。首先我们来看看生命周期的图示：

生命周期中涉及到的函数在图中都是用红色框框起来的，有beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed，这些都是生命周期中的钩子函数。

① 首先new Vue()是在实例我们当前的vue对象，当你实例vue对象时，在没有创建这个对象之前，你就会拥有beforeCreate方法，此时你可以调用这个方法，它只是对你当前的事件做一些配置，以及对当前data属性中的内容还没有真正的识别，在这个地方就是我们的vue对象还没有诞生的时候，你可以使用这个方法做加载动画。

② 然后就进入到created方法中来，在这个时候vue实例已经创建ok了，属性也成功的被绑定，但是我们的dom并没有生成，因为此时element属性还不存在，通常在这里我们可以获取对应的数据，比如请求网络的接口，把请求的接口赋给我们的属性。当我们实例化对象创建好之后，此时的页面并没有展示出来，它会继续往下走判断当前有没有el属性，如果有，就会继续判断有没有template，或者看有没有$mount("xxx")，如果两者都没有，那当前的生命周期就结束了。如果有el，也有template，就会出现两种情况：第一种情况就是template当中会执行一个具体的组件，第二种情况就是template中有对应的标签。如果两种情况都没有，那生命周期就结束了，因为没有可以渲染的东西，就不会继续往下执行。

③ 假设现在有两种情况中的任意一种，就会进入下一个钩子函数beforeMount，mount是挂载的意思，beforeMount就是开始编译当前的模板了（template中的内容），但是这个方法其实是在虚拟dom中执行的，也就是说你现在还不能看到对应的内容，它只是将你的东西挂载，但还没有挂载上去，没有真实的将你的内容渲染到页面上，之后el指向的元素要把template里的内容放进去，

④ 执行完beforeMount就会接着执行mounted，mounted函数就是模板已经编译完开始挂载了，mounted方法一旦结束，页面就显示出来了。如果你有一些内容希望在页面显示出来后再去操作，那么就要写在mounted方法里。比如你想获取后台数据，那一定是在页面显示后才去获取，此时就可以写在这里。也就是说mounted函数一挂载，dom就生成了，然后就可以看到对应的内容。

⑤ 看到内容后我们还会对当前页面做一些修改，首先是beforeUpdate函数，它是组件在更新之前发生的钩子函数。

⑥ 还有一个就是updated，它是组件已经更新完之后执行的钩子函数，这个方法一旦执行完，你的页面就展示出来了。

⑦ 当前的变化结束后就进入到组件实例化对象生命周期的尾部了，它在销毁之前可以使用beforeDestroy函数，

⑧ 最后就是销毁，destroyed函数。