Vue生命周期

Vue大概分为三大部分

• 初始化部分
• 运行/挂载部分
• 销毁部分

作用

我们可以使用生命周期钩子在Vue对象生命周期的不同阶段添加我们的自定义代码。它将帮助我们控制在DOM中创建对象时创建的流程，以及更新和删除对象。

beforCreate()

实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作，此时el和data并未初始化

created()

挂载数据，绑定事件等等，然后执行created函数，首先会判断对象是否有el选项，如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

（1）如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
（2）如果没有template选项，则将外部HTML作为模板编译。
（3）可以看到template中的模板优先级要高于outer HTML的优先级。

beforeMount()

找到对应的模板狗，编译模板为Virtual DOM (虚拟Dom)技术放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，也可以在这里做初始数据的获取，数据则用{{ msg }}占住坑,等到mounted挂载的时候再渲染进去

mounted()

接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理,事件都已经挂载

更新数据

• beforeUpdate()

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

• update()

当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作

beforeDestory()

组件销毁前

destoryed()

组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

生命周期应用实例

beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy：例如:你确认删除XX吗?、清除计时器、清除非指令绑定的事件等等
destroyed：当前组件已被删除，清空相关内容

生命周期图示

图片来自Vue中文文档