2024年前端最新Vue组件的生命周期怎么只执行一次，附面试答案

总结

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

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

• 完整地触发组件的生命周期钩子

• 触发过渡

例如：

{{ text }}

当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。

---

那么我们会发现 key 作用于 Virtual DOM 的Diff算法，如果你不写，Vue就会使用一种最大限度减少动态元素并且 尝试 修改 / 复用 Virtual DOM，而且不是重新创建😅

这种组件模板 Vue就会把组件进行复用 ，而不是重新创建，所以只会使用调用一次生命周期

而加上之后 key 之后 Vue 就会组件单独的重新创建

总结

=================================================================
对虚拟dom和diff算法不懂的可以翻看我之前的博客：
Vue中的虚拟DOM和Diff算法

最后

---

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

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。