关于生命周期
# 一、关于生命周期
# 1. 关于生命周期
# 1.1 生命周期有哪些?发送请求在created还是mounted?
请求接口测试:https://fcm.52kfw.cn/index.php?_mall_id=1&r=api/default/district
1
Vue2.x系统自带有8个
创建
beforeCreate
在这个阶段属性和方法都不能使用
created
这里时实例创建完成之后,在这里完成了数据监测,可以使用数据,修改数据,不会触发updated,也不会更新视图
挂载
beforeMount
完成了模板的编译,虚拟DOM也完成创建,即将渲染,修改数据,不会触发updated
mounted
把编译好的模板挂载到页面,这里可以发送异步请求也可以访问DOM节点
更新
beforeUpdate
组件数据更新之前使用,数据是新的,页面上的数据时旧的,组件即将更新,准备渲染,可以改数据
updated
render重新做了渲染,这时数据和页面都是新的,避免在此更新数据
销毁
beforeDestroy
实例销毁前,在这里实例还可以用,可以清楚定时器等等
destroyed
组件已经被销毁了,全部都销毁
使用了keep-alive时多出两个周期:
activited
组件激活时
deactivited
组件被销毁时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
发送请求在created还是mounted?
这个问题具体要看项目和业务的情况了,因为组件的加载顺序是,父组件引入了子组件,那么先执行父的前3个生命周期,再执行子的前4个生命周期,那么如果我们的业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中当前的请求要房mounted中,如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。
created:在渲染前调用,通常先初始化属性,然后做渲染
mounted:在模板渲染完成后,一般都是初始化页面后,在对元素节点进行操作在这里请求数据可能会出现闪屏的问题,created里不会
一般用created比较多
请求的数据对DOM有影响,那么使用created
如果请求的数据对DOM无关,可以放在mounted
1
2
3
4
5
6
7
2
3
4
5
6
7
# 1.2 为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?
为什么发送请求不在beforeCreate里?
因为:如果请求是在methods封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到methods里面的方法的(会报错了)。
1
beforeCreate和created有什么区别?
beforeCreate没有$data
created中有$data
created是可以拿到methods的方法的
beforeCreate拿不到methods的方法
1
2
3
4
5
2
3
4
5
# 1.3 在created中如何获取dom
1. 只要写异步代码,获取dom是在异步中获取的,就可以了。
例如:setTimeout、请求、Promise.xxx()等等...
2. 使用vue系统内置的this.$nextTick
1
2
3
2
3
# 1.4 一旦进入组件会执行哪些生命周期?
beforeCreate
created
beforeMount
mounted
1
2
3
4
2
3
4
# 1.5 第二次或者第N次进去组件会执行哪些生命周期?
如果当前组件加入了keep-alive,只会执行一个生命周期
activated
1
如果没有加入keep-alive
beforeCreate
created
beforeMount
mounted
1
2
3
4
2
3
4
# 1.6 父组件引入子组件,那么生命周期执行的顺序是?
父:beforeCreate、created、beforeMount
子:beforeCreate、created、beforeMount、mounted
...
父:mounted
1
2
3
4
2
3
4
# 1.7 加入keep-alive会执行哪些生命周期?
如果使用了keep-alive组件,当前的组件会额外增加2个生命周期(系统8 + 2 )
activated
deactivated
1
2
2
如果当前组件加入了keep-alive第一次进入这个组件会执行5个生命周期
beforeCreate
created
beforeMount
mounted
activated
1
2
3
4
5
2
3
4
5
# 1.8 如果使用了keep-alive第二次或者第N次,每次都会执行一个生命周期
activated
1
2
2
# 1.9 你在什么情况下用过哪些生命周期?说一说生命周期使用场景
created ===> 单组件请求
mounted ===> 同步可以获取dom,如果先子组件请求后父组件请求
activated ===> 判断id是否相等,如果不相同发起请求
destroyed ===> 关闭页面记录视频播放的时间,初始化的时候从上一次的历史开始播放
1
2
3
4
2
3
4