Vue生命周期

1.Vue生命周期全过程

2.钩子函数

2.1 beforeCreate

• beforeCreate：创建前状态。实例或组件在经过new Vue()创建出来后，初始化事件和生命周期，然后就会执行beforeCreate钩子函数，此时数据尚未挂载，无法访问到真实的数据和dom。

2.2 created

• 在beforeCreate和created钩子函数之间，程序开始监控数据变化以及vue内部的初始化事件。
• 之后执行created函数，此时已经可以使用到数据，也可以更改，根据生命周期全过程图可以看到，此时的数据修改不会触发update函数。一般可以在这里做初始数据的获取。

2.3 beforeMount

• 在created和beforeMount之间，先判断是否有el选项，若无则先暂停生命周期，当mount被调用时再继续，若有则继续编译。
• 然后判断是否有template模板，若有，编译模板放入render函数中准备渲染，若没有，则将外部html作为模板编译。（template优先级比外部html高）
• 然后执行beforeMount函数，在这个函数中虚拟dom已经创建完成，即将要渲染，此时也可以更改数据，不会触发udate。

2.4 mounted

• 在执行mounted之前，程序将上一步编辑好的html内容替换el属性指向的dom对象或者选择相应的html标签里面的内容。渲染出了真实dom。
• 然后执行mounted函数，此时，组件已经出现在页面中，事件已挂载好，数据，真实dom都已处理好，此时可以操作真实dom。

2.5 beforeUpdate

• 在执行完mounted之后，程序实时监控数据变化，一旦数据发生改变，就将立即执行beforeUpdate函数。

2.6 update

• 执行beforeUpdate之后，vue的虚拟dom机制将重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，实时更新dom。
• 当更新完成后，执行update函数。此时数据已经更新完成，dom也重新render完成，可以操作更新后的虚拟dom。

2.7 beforeDestroy

• 当经过某种途径调用$destroy方法后，立即执行beforeDestroy函数，一般这里做些善后工作，例如清楚计时器，清楚非指令绑定的事件等。

2.8 destroyed

• 组件的数据绑定，监听等等都被去掉，只剩一个dom空壳，此时执行destroy，销毁实例