关于 Vue 的面试题总结——生命周期篇
生命周期有哪些?发送请求是在 created 还是 mounted 中?
- Vue 2.X 系统自带有 8 个生命周期:
生命周期 | 描述 |
beforeCreate | 组件实例被创建之前 |
created | 组件实例已经完全创建 |
beforeMount | 组件挂载之前 |
mounted | 组件挂载到实例上之后 |
beforeUpdate | 组件数据发生变化,更新之前 |
updated | 组件数据更新之后 |
beforeDestroy | 组件实例销毁之前 |
destroyed | 组件实例销毁之后 |
注意:如果使用了 keep-alive 组件会增加 actived 和 deactived 两个生命周期。
- 这两个生命周期中调用接口,没有谁好谁坏,具体要参考项目和业务的情况。组件加载的顺序(参考下方)需要判断是需要优先展示子组件的内容还是父组件的内容,根据实际情况而定。如果子组件的数据优于父组件,那么父组件的请求就可以写在 mounted 中,如果父组件的数据优于子组件,那么父组件的请求就可以写在 created 中。
- 为什么发送请求不在 beforeCreate 中呢?beforeCreate 和 created 有什么区别?
- 因为请求是在 methods 封装好的,在 beforeCreate 中调用的时候,beforeCreate 阶段是拿不到 methods 里面的方法的(会报错)。
- beforeCreate 和 created 的区别:
beforeCreate: 1. 没有 $data。 2. 拿不到 methods 里面的方法。 created: 1. 有 $data。 2. 可以拿到 methods 里面的方法。
- 在 created 中如何获取 DOM?
只要获取 DOM 是在异步中获取的,就可以了。(**this.nextTick也是一个异步的。∗∗)也可以通过this.nextTick 也是一个异步的。** )也可以通过this.nextTick也是一个异步的。∗∗)也可以通过this.ref 来获取 DOM 元素。
- 一旦进入组件会执行哪些生命周期?
beforeCreate 组件实例被创建之前
created 组件实例已经完全创建
beforeMount 组件挂载之前
mounted 组件挂载到实例上之后
- 父组件引入子组件,那么生命周期执行的顺序是什么?
父组件(beforeCreate 、 created 、 beforeMount)→ 子组件(beforeCreate 、 created 、 beforeMount 、mounted)→ 父组件(mounted)
- 加入 keep-alive 会执行哪些生命周期?
actived
deactived