2024年最新如何理解Vue实例的生命周期，2024年最新web前端面试基础

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

生命周期函数的分类

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

生命周期函数 = 创建期间的生命周期函数 + 运行期间的生命周期函数 + 销毁期间的生命周期函数。

生命周期函数实例

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

<button @click=“sayNo”>修改msg

{{msg}}

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

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

创建期间的生命周期函数

---

（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);

最后

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

给大家分享一些关于HTML的面试题。

g(‘date的msg：’ + this.msg);

最后

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

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-eHELQy08-1715749804614)]
[外链图片转存中…(img-cLcJ9H2z-1715749804615)]