前端必问的高频面试题---vue的生命周期(有图详解)

vue的生命周期
vue生命周期分为四个阶段（常用的有8个，实际上有11个）,也就是通常说的8个钩子和四个阶段
第一阶段（创建阶段）：beforeCreate，created
相当于人一生中：准备出生之前的阶段，精子+卵子，细胞组合-十月怀胎-出生
在beforCreate之前
vue做了两件事：methos声明，生命周期钩子函数声明
在创建阶段
data数据注入，data数据劫持
1.遍历递归data选项，给每个声明式变量添加setter/getter
2.把劫持过变量都放在组件实例上

第二阶段（挂载阶段）：beforeMount，mounted
相当于人一生中：找结婚证，出生证-上户口的过程
在beforeMount之前
会寻找是否有template/el的模板，组件的试图模板（带有指令的HTML字符串）
把找到的template视图（带有指令的HTML字符串），编译成render（）渲染函数
在挂载阶段
vue做了下面的事（vue引擎第一次工作）
1.根据render()渲染函数，生成“抽象语法树AST”（此时还是带有指令的），再把AST第一次创建成“虚拟DOM（VNode1）”（Vnode是真实DOM的一种数据描述，它本质上是json格式的数据）
2.根据Vnode1创建真实DOM（第一次接触，收集依赖，watcher发生在此处）把那些声明式变量全部替换成真实数据，DOM渲染完成

第三阶段（更新阶段）：beforeUpdate，updated
相当于人一生中：不断成长，长大，青年-中年-老年
在beforeUpdate之前
当被劫持的data数据发生变化时，这将经入更新阶段
在更新阶段
vue做了以下事情：
1.当vue上下文的data发生变化时，使用render（）渲染函数在生成一新的Vnode2
2.使用大名鼎鼎的Diff运算，patch（old Vnode，new Vnode），找出两个Vnode最小差异，合并Vnode，生成新的Vnode，删除旧的Vnode
3.notify通过Watcher根据"依赖收集"在此更新真实DOM
【为什么要有虚拟DOM这个“玩意”?】
虚拟DOM存在的价值，大大降低了“Jquery时代，认为寻找DOM变化差异”的不足（因为每个人的主观不同，寻找的差异不同），最小化的去更新DOM（尽可能的减少DOM操作）。所以虚拟DOM是MVVM的本质，VM代表的就是虚拟DOM

第四阶段（销毁阶段）：beforeDestroy/destroyed
相当于人生中，死亡的过程
在调用destroy（）或路由切换时，组件经入销毁阶段
在销毁阶段中，vue做了如下事情
1.拆卸掉了Watcher，所以DOM不可能再发生更新
2.拆卸掉当前组件的所有子组件，所以这些子组件也会经入销毁阶段
3.卸载掉当前组件中的事件处理器
（生命周期的钩子函数，代表的是生命周期的某一时刻）

详解如图