1.描述对Vue生命周期的理解
对于生命周期,就是Vue中实例 在创建 -> 销毁:
1. 创建 2.初始化数据 3.编译template 4.挂载DOM 5.渲染 6.更新渲染 7.卸载
生命周期函数:
beforeCreate | 实例创建之初,初始化插件 |
created | 组件已经创建完毕,异步请求获取 dom并没有生成 |
beforeMount | 组件挂载之前 |
mounted | 组件挂载之后,异步请求获取 render dom更新,页面变化 |
beforeUpdate | 数据发生变化,更新之前 |
updated | 数据发生变化更新后 |
beforeDestroy | 实例销毁前 |
destroyed | 销毁后 |
activated | keep-alive组件激活 |
deactivated | keep-alive组件停用 |
errorCaptured | 捕获实例的错误被调用 |
在beforeCreate阶段,dom和data都是undefined;在created和beforeMount阶段,dom是undefined,data是可以获取的;在mounted阶段,dom和data可以获取。
详解:
new Vue() const vm = new Vue(){} // 创建空的实例对象
init events lifecycle// beforeCreate
init reactivity data injection methods// created
option
- yes
- no el option vm.$mount(el)template
- yes compile
- no el outerHTML as template// beforeMount 此时,模版已经编译好 但是页面未更新
vm.$el replace $el// mounted 在DOM上进行渲染完成
// beforeUpdate
DOM re-render patch// updated
// beforeDestory
data methods filter directive 可用// destoryed
问题1:生命周期有哪些?发送请求在created还是mounted?
生命周期有哪些?
Vue2.x系统自带有8个,分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy,destroyed。
发送请求在created还是mounted?
这个问题具体要看项目和业务端的情况,因为组件的加载顺序是,父组件引入了子组件,那么先执行父组件的前3个生命周期(beforeCreate、created、beforeMount),再执行子组件的前4个生命周期,那么如果我们的业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中,当前的请求要放在mounted中;如果当前组件没有依赖关系,那么放在哪个生命周期中请求都是可以的。
问题2:为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?
为什么发送请求不在beforeCreate里?
因为:如果请求是在methods中封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到methods里面的方法的(会报错)。这个阶段根本没有this。
beforeCreate和created有什么区别?
beforeCreate没有$data,created中有$data
beforeCreate拿不到methods中的方法,created是可以拿到methods中的方法的
问题3:在created中如何获取dom?
1.只要写异步代码,获取dom是在异步中获取的,就可以了。
例如:setTimeout、请求、Promise.xxx()等等...
2.使用vue系统内置的this.$nextTick
问题4:一旦进入组件会执行哪些生命周期?
beforeCreate、created、beforeMount、mounted
问题5:第二次或者第N次进去组件,会执行哪些生命周期?
如果当前组件加入了keep-alive,只会执行一个生命周期
activated
如果没有加入keep-alive
beforeCreate、created、beforeMount、mounted
问题6:父组件引入子组件,那么生命周期执行的顺序是?
父:beforeCreate、created、beforeMount
子:beforeCreate、created、beforeMount、mounted
......
【若是父组件中引入了多个子组件,顺序执行所有子组件】
父:mounted
问题7:加入keep-alive会执行哪些生命周期?
如果使用了keep-alive组件,当前的组件会额外增加2个生命周期(系统8+2)
activated、deactivated
如果当前组件加入keep-alive第一次进入这个组件会执行5个生命周期
beforeCreate、created、beforeMount、mounted、activated
问题8:keep-alive
keep-alive是什么 : 缓存当前组件
问题9:你在什么情况下用过哪些生命周期?说一说生命周期使用场景
created ===> 单组件请求
mounted ===> 同步可以获取dom,如果子组件请求后父组件请求
activated ===> 判断id是否相等,如果不相同发送请求(例如商品的详情页)
destroyed ===> 关闭页面,记录视频播放的时间,初始化的时候从上一次的历史开始播放