活动地址:CSDN21天学习挑战赛
Vue的生命周期
1、引出生命周期
1、生命周期又称为:生命周期回调函数,生命周期函数,生命周期钩子函数
2、是什么:Vue在关键时刻班我们调用的一些特殊名称的函数
3、生命周期函数的名字不可更改,但是函数中的执行逻辑是由程序员所进行编写
4、生命周期函数中的this指向为Vm或者为组件实例对象
第一个生命周期函数:mounted(){}
mounted:挂载完毕
该方法执行的条件为:只有页面第一次初始的真实DOM加载完毕才会进行调用,其他情况不会执行
2、分析生命周期
1、生命周期触发流程
生命周期存在8个回调方法,也是四对,而一个完整的Vue实例通常要经历四个流程
规则创建流程–>数据挂载流程–>数据更新流程–>数据销毁流程
翻译 | 调用方法 | 详情 |
---|---|---|
将要创建 | beforeCreate | 初始化数据监测、数据代理准备开始;此时该方法还无法获取vm中的数据 |
创建完毕 | created | 初始化数据监测、数据代理完成;此时已经可以访问到vm中的数据了 |
将要挂载 | beforeMount | 数据挂载之前;此时数据对页面的初始化渲染还未开始 |
挂载完毕 | mounted | 数据挂载完毕;此时数据对页面的初始化渲染已经完成,页面中的内容已经发生改变 |
将要更新 | beforeUpdate | 页面更新之前;此时用户对vm中的数据已经发生更改,但页面还未更新 |
更新完毕 | updated | 页面更新完毕;此时页面已经通过用户修改的数据 将页面更新 |
将要销毁 | beforeDestroye | Vue实例触发了销毁操作,Vue即将销毁但是还未开始,这里通常进行收尾操作 |
销毁完毕 | destroyed | Vue实例已经完成了销毁 |
2、常用的生命周期钩子
1、mounted:发送ajax请求、启动定时器、绑定自定义时间、订阅消息
2、beforeDestroy:清除定时器、解绑自定义事件、取消订阅等收尾工作
3、关于销毁Vue实例需要注意的事:
销毁实例只需调用 vm.$destroy()即可
- Vue实例销毁完毕后借助Vue开发者工具将看不到任何信息
- 销毁之后的自定义事件会生效、但是原生的DOM事件依然存在
- 一般不会在beforeDestroy()方法中操作数据,因为哪怕修改了数据Vue也会在触发更新流程了
- 销毁操作一但触发,对于Vue实例中的数据操作 Vue都不会进行页面更新了
4、Vue的工作流程
首先当我们执行了 newVue(){} 这串代码时 Vue的工作就已经开始了
第一步:开始制定规则 例如指令、指令修饰符等规则
此时就已经存在vm的实例对象了,但是里面没有数据
第二步:开始创建数据监测、数据代理等操作
创建完毕后 这一步便可以开始对vm中的数据进行访问/修改了,通常执行一些初始化操作
第三步:开始数据挂载
准备将初始化的数据渲染到页面中的指定位置
第四步:用户动态更新了数据,
检测到数据变化之后吗,Vue也会进行更新页面等响应式操作
第五步如果Vue被触发了销毁命令,那么Vue将会开始销毁
注意此时数据发生修改也不会再触发页面渲染的更新,通常在销毁之前执行一些收尾工作