面试官：你对 vue 生命周期的了解？
一、生命周期是什么
生命周期 （Life Cycle） 的概念利用很宽泛，特地是在政治、经济、环境、技术、社会等诸多畛域经常出现，其根本涵义能够艰深地了解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程
在 Vue 中实例从创立到销毁的过程就是生命周期，即指从创立、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程
咱们能够把组件比喻成工厂外面的一条流水线，每个工人（生命周期）站在各自的岗位，当工作流转到工人身边的时候，工人就开始工作
PS：在 Vue 生命周期钩子会主动绑定 this 上下文到实例中，因而你能够拜访数据，对 property 和办法进行运算
这意味着 你不能应用箭头函数来定义一个生命周期办法 (例如 created: () => this.fetchTodos())
二、生命周期有哪些
Vue 生命周期总共能够分为 8 个阶段：创立前后, 载入前后, 更新前后, 销毁前销毁后，以及一些非凡场景的生命周期
| 生命周期 | 形容 |
|---|---|
| beforeCreate | 组件实例被创立之初 |
| created | 组件实例曾经齐全创立 |
| beforeMount | 组件挂载之前 |
| mounted | 组件挂载到实例下来之后 |
| beforeUpdate | 组件数据发生变化，更新之前 |
| updated | 数据数据更新之后 |
| beforeDestroy | 组件实例销毁之前 |
| destroyed | 组件实例销毁之后 |
| activated | keep-alive 缓存的组件激活时 |
| deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | 捕捉一个来自子孙组件的谬误时被调用 |
三、生命周期整体流程
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、render 之一） - 此时
view层还未更新 - 若在
beforeUpdate中再次批改数据，不会再次触发更新办法
updated
- 实现
view层的更新 - 若在
updated中再次批改数据，会再次触发更新办法（beforeUpdate、updated）
beforeDestroy
- 实例被销毁前调用，此时实例属性与办法仍可拜访
destroyed
- 齐全销毁一个实例。可清理它与其它实例的连贯，解绑它的全副指令及事件监听器
- 并不能革除 DOM，仅仅销毁实例
应用场景剖析
<style> table th:first-of-type {width: 120px;} </style>
四、题外话：数据申请在 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 语音社群