生命周期
什么叫做vue的生命周期
一个vue的实例在它创建到销毁的一系列过程,就叫做生命周期
什么是生命周期钩子函数
在vue实例的生命周期中,某个特定时刻会自动触发的函数,就叫做生命周期的钩子函数
需要发送数据请求的话,一般是选择在 created或mounted这两个阶段
第一次加载页面会 触发 beforeCreate, created, beforeMount, mounted这四个钩子
Vue生命周期的作用是什么?
它的生命周期中有多个时间钩子,让我们在控制整个VUe实例的过程时更容易形成好的逻辑
vue⽣命周期主要分为四个阶段,⼋个过程
四个阶段
- Create 创建
- Mount 挂载
- Update 更新
- Destory 销毁
⼋个过程
- Create之前和Create之后
- Mount之前和Mount之后
- Update之前和Update之后
- Destory之前和Destory之后
分析过程
1. 第⼀个过程 beforeCreate 实例创建初始化前
- 注意:⽆法通过实例vm访问到data中的数据、methods中的⽅法
2. 第⼆个过程 Created 初始化后
- 注意:可以通过实例vm访问data中的数据,methods中配置的⽅法,但拿不到真实的dom对象和this.$el。
3. 第三个过程 beforMount 挂载前(编译完成,未挂载)
- 注意:vue会将el对应的模版添加到vm.$el中去,模板编译完成但还没有挂载上去,数据和模块还未进行结合,此时⻚⾯还是旧的 ,拿不到真实的dom对象和this.$el。
4. 第四个过程 Mounted 挂载完成
- 注意:vue将真实DOM挂载到⻚⾯上。拿到真实的dom对象和this.$el
5. 第五个过程 beforUpdate 更新之前
- 注意: 页面显示的数据还是旧的,但此时data的数据是新的,页面尚未和最新数据保持同步
6. 第六个过程 Updated 数据更新完毕
- 注意:页面和最新数据保持同步,更新完再渲染,谁改变渲染谁,不是整个DOM树
7. 第七个过程 beforDestry 销毁前
- 注意:销毁操作需要⼿动调⽤,需要调⽤vm.$destroy()
8. 第⼋个过程 destroyed 销毁后
- 注意:数据和dom的关联已经断开,在这个生命周期函数中是访问不到真实的dom结构的
总结
1、beforeCreate 此时$el、data 的值都为undefined
2、Created创建之后,此时可以拿到data的值,但是$el依旧为undefined
3、mount之前,$el的值为“虚拟”的元素节点
4、mount之后,mounted之前,“虚拟”的dom节点被真实的dom节点替换,并将其插入到dom树中,于是在触发mounted时,可以获取到$el为真实的dom元素()
5.created与mounted调用区别:
- created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
- mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。