关于 Vue 的面试题总结——生命周期篇

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

• 生命周期有哪些？发送请求是在 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.$ref 来获取 DOM 元素。

• 一旦进入组件会执行哪些生命周期？

  beforeCreate 组件实例被创建之前

  created 组件实例已经完全创建

  beforeMount 组件挂载之前

  mounted 组件挂载到实例上之后

• 父组件引入子组件，那么生命周期执行的顺序是什么？

  父组件（beforeCreate 、 created 、 beforeMount）→ 子组件（beforeCreate 、 created 、 beforeMount 、mounted）→ 父组件（mounted）

• 加入 keep-alive 会执行哪些生命周期？

  actived

  deactived