前端每日一题（10.16题目+10.15答案）

前端猎手

哈喽，大家好

我是法医

快来和法医一起看看

今天的前端每日一题吧

10月16日~面试题：

10月15日~参考答案：

解释一下对 Vue 生命周期的理解

我们可以从以下方面进行回答：

• 什么是 vue 生命周期
• vue 生命周期的作用是什么
• vue 生命周期有几个阶段
• 第一次页面加载会触发哪几个钩子
• DOM 渲染在哪个周期就已经完成
• 多组件（父子组件）中生命周期的调用顺序说一下

参考答案：

什么是 vue 生命周期

对于 vue 来讲，生命周期就是一个 vue 实例从创建到销毁的过程。

vue 生命周期的作用是什么

在生命周期的过程中会运行着一些叫做生命周期的函数，给予了开发者在不同的生命周期阶段添加业务代码的能力。

其实和回调是一个概念，当系统执行到某处时，检查是否有 hook(钩子)，有的话就会执行回调。

通俗的说，hook 就是在程序运行中，在某个特定的位置，框架的开发者设计好了一个钩子来告诉我们当前程序已经运行到特定的位置了，会触发一个回调函数，并提供给我们，让我们可以在生命周期的特定阶段进行相关业务代码的编写。

vue 生命周期有几个阶段

它可以总共分为 8 个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

• beforeCreate：是 new Vue( ) 之后触发的第一个钩子，在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。
• created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发 updated 函数。可以做一些初始数据的获取，在当前阶段无法与 DOM 进行交互，如果非要想，可以通过 vm.$nextTick 来访问 DOM 。
• beforeMount：发生在挂载之前，在这之前 template 模板已导入渲染函数编译。而当前阶段虚拟 DOM 已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发 updated。
• mounted：在挂载完成后发生，在当前阶段，真实的 DOM 挂载完毕，数据完成双向绑定，可以访问到 DOM 节点，使用 $refs 属性对 DOM 进行操作。
• beforeUpdate：发生在更新之前，也就是响应式数据发生更新，虚拟 DOM 重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
• updated：发生在更新完成之后，当前阶段组件 DOM 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
• beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
• destroyed：发生在实例销毁之后，这个时候只剩下了 DOM 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

第一次页面加载会触发哪几个钩子

会触发 4 个钩子，分别是：beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期就已经完成

DOM 渲染是在 mounted 阶段完成，此阶段真实的 DOM 挂载完毕，数据完成双向绑定，可以访问到 DOM 节点。

多组件（父子组件）中生命周期的调用顺序说一下

组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

• 加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
• 子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程：父 beforeUpdate -> 父 updated
• 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

每天都会有一道面试题，大家的积极参与和讨论，是我继续下去的动力，希望大家踊跃互动，共同进步！保持学习，每天进步一点点！

大家可以将自己的想法在评论区留言，答案我会在明天每日一题中公布！