vue生命周期加载顺序

1、beforeCreate（创建前）表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。此钩子函数不能获取到数据，dom元素也没有渲染出来，此钩子函数不会用来做什么事情。

2、created（创建后）数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。在这个钩子函数里面，如果同步更改数据的话，不会影响运行中钩子函数的执行。可以用来发送ajax请求，也可以做一些初始化事件的相关操作。

3、beforeMount（挂载前）vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数仅仅执行一次，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

keep-alive 缓存特殊的两个阶段：
5、activated(组件激活时)

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

该钩子在服务器端渲染期间不被调用。

6、deactivated(组件停用时)

被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作

该钩子在服务器端渲染期间不被调用。

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数，初始化操作放在actived里面，一旦切换组件，因为组件没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在deactived里面，在里面进行一些善后操作，这个时候created钩子函数只会执行一次，销毁的钩子函数一直没有执行。

7、beforeUpdate（更新前）

8、updated（更新后）

9、beforeDestory（销毁前）切换路由的时候，组件就会被销毁了，销毁之前执行beforeDestroy。在这个钩子函数里面，我们可以做一些善后的操作，例如可以清空一下全局的定时器（created钩子函数绑定的初始化阶段的事件）、清除事件绑定。

Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

10、destoryed（销毁后）

组件销毁后执行destroyed，销毁后组件的双向数据绑定、事件监听watcher相关的都被移除掉了，对 data 的改变不会再触发周期函数但是组件的真实dom结构还是存在在页面中的。

这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

父子组件的执行顺序：
加载渲染过程：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程：
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程：
父beforeUpdate->父updated
销毁过程：
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

三、小结
created:html加载完成之前执行。执行顺序：父组件-子组件
mounted:html加载完成后执行。执行顺序：子组件-父组件
methods：事件方法执行
watch：watch是去监听一个值的变化，然后执行相对应的函数
computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值

created()：dom还未生成，仅仅触发一次；
mounted：dom渲染完毕，仅仅执行一次；
activated()：在使用时keep-live主要目的是可以使用缓存，避免组件重新渲染；只要进入组件激活就会触发。