Vue 之 生命周期

什么是生命周期？

又名： 生命周期回调函数、生命周期函数、生命周期钩子

是 Vue在关键时刻帮助我们调用的一些特殊名称的函数

vue的生命周期就是从创建到销毁的过程中，在某个特定的时间点自动执行的函数，有8个生命周期函数：beforeCreate，Create，beforeMount，Mounted，beforeUpdate，Update，beforeDestory，destoryed

生命周期函数中的this指向是vm 或 组件实例对象 

生命周期函数的名字不可更改（mounted），但函数的具体内容时程序员根据需求编写的 

下图为生命周期流程图 

 

1. beforeCreate（将要创建）

 beforeCreate（）函数是vue将要创建但还没有创建的函数，此时无法通过vm访问到data的数据和methods中的方法

初始化：生命周期，事件，但数据代理还未开始

2. Create（创建完毕）

 Create（）函数，此时可以通过vm访问到data中的数据，methods中的方法

vue实例对象已经创建完成后调用该函数，数据监测，数据代理等都已经开始工作，这时候可以调用methods中的方法和使用data中的数据了

3. beforeMount（将要挂载）

 beforeMount（）函数表示vue开始解析模板，对代码中的指令进行执行，渲染到虚拟DOM中，（虚拟DOM存在内存中），值得注意的是，此时模板还没有渲染到页面上，页面上呈现的是未经编译的DOM结构，所有对DOM的操作最终都不会奏效

4. Mounted （挂在完毕）

 Mounted（）函数是将内存中解析的虚拟DOM转为真实DOM插入到页面中去

页面此时呈现的是经过编译的DOM，对DOM的操作做都可以实现，到此为止，初始化过程就结束了

一般在这个阶段进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化的操作

5.beforeUpdate（将要更新）

 beforeUpdate（）函数阶段页面显示的数据还是旧的，未更新的数据，但是data中的数据是最新的，页面尚未和数据保持同步

beforeUpdate-->Update  的这个阶段会根据新的数据生成新的DOM，将新的DOM与旧的DOM进行比较，完成页面更新，完成了model-->view（视图层）的更新

6. Update（更新完毕）

 Update（）阶段数据是新的，页面显示的数据也是最新的，页面和数据保持同步

7. beforeDestory（将要销毁）

 beforeDestory（）阶段处于即将销毁的阶段，实例对象中的data，methods等等都还是处于可用状态，

一般在此阶段关闭定时器，取消订阅消息，解绑自定义事件等操作

8. destoryed（销毁完毕）

 destoryed（）阶段组件已经完成销毁了，此时所有的指令，数据都不可用

关于销毁Vue实例

• 销毁后借助Vue开发者工具看不到任何信息
• 销毁后自定义事件会失效，但原生DOM事件依然有效
•  一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了 

 

---

生命周期是学习vue非常重要的一个阶段，一定要弄懂学懂 ！