Vue的生命周期

一、什么是Vue生命周期？
Vue实例从创建到销毁的过程，就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom – > 渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。

二、vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

三、第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子，其中DOM渲染在 mounted 中就已经完成了

四、生命周期详解

1.beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

2.created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

3.beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用

4.mounted中el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

5.beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行

6.updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM
的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。

7.activatedkeep-alive 组件激活时调用。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
该钩子在服务器端渲染期间不被调用

8.deactivatedkeep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

9.beforeDestory实例销毁之前调用。在这一步，实例仍然完全可用。频繁的创建和销毁组件对性能的影响很大，因此可以使用activated和deactivated
该钩子在服务器端渲染期间不被调用

10.destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
该钩子在服务器端渲染期间不被调用

五、Vue生命周期的执行过程

1、实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期

2、在创建Vue实例的时候，执行了init()初始化方法，在init过程中首先调用了beforeCreate钩子函数

3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作挂载数据，绑定事件等等

4、以上都干完了，调用Created钩子函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

5、模板编译，把data对象里面的数据和vue语法利用虚拟dom放入到render函数中准备渲染

6、编译模板完成，调用beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

7、render函数执行之后，将渲染出来的内容挂载到DOM节点上

8、挂载结束，调用Mounted钩子函数此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom

9、当组件或实例的数据更改之后，立即执行beforeUpdate钩子函数，重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

10、更新完成，执行Updated钩子函数，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

11、当经过某种途径调用$destroy方法后，调用beforeDestory一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等组件的数据绑定、监听…去掉后只剩下dom空壳

12、Destoryed实例销毁；