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

本文详细探讨了Vue.js的生命周期,从创建阶段的beforeCreate和created,到挂载阶段的beforeMount和mounted,再到更新阶段的beforeUpdate和updated,最后是销毁阶段的beforeDestroy和destroyed。每个阶段都有其特定的职责,例如数据劫持、DOM渲染和更新、以及组件销毁。Vue.js的虚拟DOM机制在减少DOM操作和提高性能方面发挥了关键作用。
摘要由CSDN通过智能技术生成

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.卸载掉当前组件中的事件处理器
(生命周期的钩子函数,代表的是生命周期的某一时刻)

详解如图


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值