什么是生命周期？
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
对于我来说Vue只是会用用写写页面与前后端交互之类的，并没有深究，这可以来说是没有吃透Vue。举个例子把今天在项目中要更改div中字体的颜色，我就使用的js方法，$('.add').css('color','red')的方法。但是我把这个函数应该放到哪个钩子函数下呢？根据以往的经验，我选择了created(){}的函数之下，详情见下图：
但是当我打开浏览器的时候没有任何变化，仍然显示color为默认颜色。我并没有想到是Vue的原因，而是想到一个初级前端都会犯的错误。就是我的.css语法弄错了，于是百度，但是没有错。这时候我纳闷了。alert（11）都可以执行，但是走到改变颜色这一步就不能执行了？这时候大家肯定会想到，没有获取到DOM元素才会导致颜色没有变化。
顺着这个思路我就百度了一下Vue初始化执行函数，这时候在网页中显示一个mounted和created 的区别。抱着一丝希望点进去之后百度给了我一个答案：
看到这个我给大家解释一下，我顿时明白以前看过一篇文章，vue的生命周期讲的就是这个。上面所说的created的钩子函数已经完成数据检测，或者watch事件的回调，但是$el属性不可见。换句话说最重要的dom还不可见，所以我在项目中把改变字体颜色的方法放到created中根本不会走，因为获取不到的div。所以将this.geys()方法放到mounted中就会改变。
详细介绍一下vue的生命周期，什么时候用什么钩子函数。
先不说上图：
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
对于执行顺序，什么时候执行，上面的知识我们看过之后就可以有个大概了解，下面我一边代码上图一边讲解：
咱们在chrome浏览器里打开，F12看console就能发现：
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted：完成挂载
另外在标红处，我们能发现el还是 {{message}}，这里就是应用的Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
关于updated
我们在console中执行：app.message='yes!! Ido';
下面就能看到data里的值被修改后，将会触发update的操作。
关于destroy
在控制台执行app.$destroy();
有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了
如下图：
后续
关于vue的生命周期本人就总结到这里吧，都是个人意见，如果读者发现哪里不正确希望能及时给指出，希望本人的实验能给你们带来帮助，后续如果还有其它的见解，继续分享！
