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 等等。