2024年最全如何理解Vue实例的生命周期,牛笔了

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

beforeUpdate() {

console.log(‘beforeUpdate:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

updated() {

console.log(‘updated:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

beforeDestroy() {

},

destroyed() {

}

});

每个周期函数的存在时间和表现形式

===============================================================================

创建期间的生命周期函数


(1)beforeCreate函数

这是遇到的第一个生命周期函数,表示Vue实例完全被创建出来前,会执行它,此时data和methods中的数据都还没初始化。

beforeCreate() {

console.log(‘beforeCreate:’);

console.log(‘date的msg:’ + this.msg);

this.show();

},

在这里插入图片描述

(2)created函数

这是遇到的第二个生命周期函数,表示Vue开始编辑模板,把Vue中的那些指令进行执行,最终在内存中生成一个已经编译好的最终模板字符串。然后,把这个模板字符串,渲染为内存中的DOM,此时,只是在内存中,渲染好了模板,并没有真正把模板挂在到页面中去。

created() {

console.log(‘created:’);

console.log(‘date的msg:’ + this.msg);

this.show();

},

在这里插入图片描述

(3)beforeMount函数

这是遇到的第三个生命周期函数,表示模板已经在内存中完成了,但是尚未把模板渲染到页面中,在beforeMounted 执行的时候,页面中的元素还没有真正替换过来,只是之前写的一些模板字符。

beforeMount() {

console.log(‘beforeMount:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

在这里插入图片描述

(4)mounted函数

这是遇到的第四个生命周期函数,表示,内存中的模板已经真实挂在到了页面中,用户可以看到渲染好的页面了。注意: mounted是实例创建期间的最后一个生命周期函数,执行完mounted 就表示,实例已经完全地创建好了。此时,如果没有其他操作地话,这个实例,就静静地躺在我们地内存中,一动不动。

mounted() {

console.log(‘Mounted:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

在这里插入图片描述

运行期间的生命周期函数


(1)beforeUpdate函数

当运行beforeUpdate的时候,页面中的显示数据还是旧的,此时data数据是最新的,页面还未和数据保持同步。

beforeUpdate() {

console.log(‘beforeUpdate:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

在这里插入图片描述

(2)updated函数

updated事件执行的时候,页面和data数据已经保持同步了,都是最新的。

updated() {

console.log(‘updated:’);

console.log(‘date的msg:’ + this.msg);

console.log(‘页面内容的msg:’ + document.getElementById(‘h2’).innerText);

},

在这里插入图片描述

注意:如果页面是一个静态页面,数据完全没有任何变化,那么beforeUpdate函数和updated函数就可以永远不会执行。如果数据一直在变化,那么beforeUpdate函数和updated函数的执行次数可以为无数次。

销毁期间的生命周期函数


最后

中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。

  • 技术要深入到什么程度?

  • 做久了技术总要转型管理?

  • 我能做什么,我想做什么?

  • 一技之长,就是深耕你的专业技能,你的专业技术。(重点)

  • 独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)

  • 拥有事业,选择一份使命,带领团队实现它。(创业)

一技之长分五个层次

  • 栈内技术 - 是指你的前端专业领域技术

  • 栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识

  • 工程经验 - 是建设专业技术体系的“解决方案”

  • 带人做事 - 是对团队协作能力的要求

  • 业界发声 - 工作经验总结对外分享,与他人交流

永远不要放弃一技之长,它值得你长期信仰持有

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。

  • 23
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值