关于生命周期
生命周期有哪些?发送请求在 created 还是 mounted ?
Vue2.x 系统自带有 8 个生命周期:
beforeCreate
created
// 目前还没有 dom
beforeMount
mounted
befroreUpdate
updated
beforeDestroy
destroyed
发请求可以在 mounted 周期中,也可以在 created 周期中。
这个需要根据项目和业务的具体情况来选择。
组件的加载顺序是:
因为父组件引入了子组件,那么执行的顺序将是由父组件先执行前三个生命周期,而后按照先后顺序,每个子组件都将执行完前四个生命周期,子组件全部挂载完毕后,父组件执行第四个生命周期,挂载 dom。
如果业务是父组件引入子组件,需要优先加载子组件的数据,那么在父组件中,请求需要放在 mounted 中。
如果当前组件没有依赖关系,那么放在 mounted 和 beforeCreate 中都可以。
发请求为什么在 mounted 而不在 beforeCreate?beforeCreate 和 created 有什么区别?
为什么不在 beforeCreate 中发请求?
如果请求是在 methods 中封装好的,在 beforeCreate 中调用。
则在 beforeCreate 阶段无法获取到 methods 中的方法,并且会报错。
但是如果请求不是封装在 methods 中,而是直接进入页面进而执行的,那么是可以顺利发起请求的。
beforeCreate 和 created 有什么区别?
beforeCreate 没有 d a t a ,拿不到 data,拿不到 data,拿不到el。
created 中有 d a t a ,可以拿到 data,可以拿到 data,可以拿到el。
在 created 中如何获取 dom ?
通过使用异步操作,使得获取 dom 是在异步操作中进行的。
比如:setTimeout、请求、Promise.xxx() 等等。
Vue 内置的 this.$nextTick()、ref 等等。
一旦进入组件,会执行哪些生命周期?
beforeCreate
created
beforeMount
mounted
第二次或者第 N 次进入组件,会执行哪些生命周期?
如果当前组件加入了 keep-alive,只会执行一个生命周期:
activated
如果没有加入 keep-alive,会执行前四个生命周期:
beforeCreate created beforeMount mounted
如果父组件引入了子组件,生命周期的顺序是什么?
beforeCreate // 父
created // 父
beforeMount // 父beforeCreate // 子
created // 子
beforeMount // 子
mounted // 子mounted // 父
先准备父组件,对数据进行一些处理或者向子组件传递,让子组件可以接收到,而后准备子组件并挂载子组件,子组件挂载完毕后,父组件挂载。
- 父:
beforeCreate,created,beforeMount
- 子 1:
beforeCreate,created,beforeMount,mounted
子 2:beforeCreate,created,beforeMount,mounted
… - 父:
mounted
加入 keep-alive 会执行哪些生命周期?
activated 和 deactivated 两个生命周期。
如果使用了 keep-alive,系统会添加两个生命周期(activated 和 deactivated),一共是 10 个生命周期。
第一次进入组件会执行 5 个生命周期(前四个和 activated)。
你在什么情况下使用过生命周期?描述一下生命周期的使用场景
created ====> 单组件请求。
mounted ====> 同步代码可以获取 dom,如果子组件需要先于父组件发请求,也在 mounted 中处理。
activated ====> 缓存组件,判断 id 是否相等,如果相等则不需要再次发起请求,如果不相等则发请求。
destroyed ====> 关闭页面记录视频播放的事件,初始化的时候从上一次的历史开始播放。
关于生命周期的总结
生命周期一共有 8 个:
beforeCreate、created、beforeMount、mounted、befroreUpdate、updated、beforeDestroy、destroyed
。
这是系统自带的。
还有两个由 keep-alive 添加的:
activated、deactivated
。
组件挂载的时候会执行
beforeCreate、created、beforeMount、mounted
4 个生命周期,但是如果加入了 keep-alive,将会多执行一个
activated
,这种组件在重复进入时只会执行
activated
一个周期。
父组件将在全部子组件挂载完毕后执行
mounted
周期。