关于vue.js:面试官你对vue生命周期的理解

面试官：你对 vue 生命周期的了解？

一、生命周期是什么

生命周期 （Life Cycle） 的概念利用很宽泛，特地是在政治、经济、环境、技术、社会等诸多畛域经常出现，其根本涵义能够艰深地了解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程

在 Vue 中实例从创立到销毁的过程就是生命周期，即指从创立、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程

咱们能够把组件比喻成工厂外面的一条流水线，每个工人（生命周期）站在各自的岗位，当工作流转到工人身边的时候，工人就开始工作

PS：在 Vue 生命周期钩子会主动绑定 this 上下文到实例中，因而你能够拜访数据，对 property 和办法进行运算

这意味着 你不能应用箭头函数来定义一个生命周期办法 (例如 created: () => this.fetchTodos())

二、生命周期有哪些

Vue 生命周期总共能够分为 8 个阶段：创立前后, 载入前后, 更新前后, 销毁前销毁后，以及一些非凡场景的生命周期

三、生命周期整体流程

Vue生命周期解释图

具体分析

beforeCreate -> created

• 初始化 vue 实例，进行数据观测

created

• 实现数据观测，属性与办法的运算，watch、event事件回调的配置
• 可调用 methods 中的办法，拜访和批改 data 数据触发响应式渲染 dom，可通过computed 和watch实现数据计算
• 此时vm.$el 并没有被创立

created -> beforeMount

• 判断是否存在 el 选项，若不存在则进行编译，直到调用 vm.$mount(el) 才会持续编译
• 优先级：render > template > outerHTML
• vm.el获取到的是挂载 DOM 的

beforeMount

• 在此阶段可获取到vm.el
• 此阶段 vm.el 虽已实现 DOM 初始化，但并未挂载在 el 选项上

beforeMount -> mounted

• 此阶段 vm.el 实现挂载，vm.$el生成的 DOM 替换了 el 选项所对应的DOM

mounted

• vm.el已实现 DOM 的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的 DOM

beforeUpdate

• 更新的数据必须是被渲染在模板上的（el、template、rende r 之一）
• 此时 view 层还未更新
• 若在 beforeUpdate 中再次批改数据，不会再次触发更新办法

updated

• 实现 view 层的更新
• 若在 updated 中再次批改数据，会再次触发更新办法（beforeUpdate、updated）

beforeDestroy

• 实例被销毁前调用，此时实例属性与办法仍可拜访

destroyed

• 齐全销毁一个实例。可清理它与其它实例的连贯，解绑它的全副指令及事件监听器
• 并不能革除 DOM，仅仅销毁实例

应用场景剖析

<style> table th:first-of-type {width: 120px;} </style>

| 生命周期 | 形容 |
| ————- | ———————————————————— |
| beforeCreate | 执行时组件实例还未创立，通常用于插件开发中执行一些初始化工作 |
| created | 组件初始化结束，各种数据能够应用，罕用于异步数据获取 |
| beforeMount | 未执行渲染、更新，dom 未创立 |
| mounted | 初始化完结，dom 已创立，可用于获取拜访数据和 dom 元素 |
| beforeUpdate | 更新前，可用于获取更新前各种状态 |
| updated | 更新后，所有状态已是最新 |
| beforeDestroy | 销毁前，可用于一些定时器或订阅的勾销 |
| destroyed | 组件已销毁，作用同上 |

四、题外话：数据申请在 created 和 mouted 的区别

created是在组件实例一旦创立实现的时候立即调用，这时候页面 dom 节点并未生成

mounted是在页面 dom 节点渲染结束之后就立即执行的

触发机会上 created 是比 mounted 要更早的

两者相同点：都能拿到实例对象的属性和办法

探讨这个问题实质就是触发的机会，放在 mounted 申请有可能导致页面闪动（页面 dom 构造曾经生成），但如果在页面加载前实现则不会呈现此状况

倡议：放在 create 生命周期当中

参考文献

• https://juejin.cn/post/684490…
• https://baike.baidu.com/
• http://cn.vuejs.org/

@JS 语音社群