Web前端最全vue及其生命周期介绍_vue什么周期，2024年最新京东前端面试题及答案

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

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

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

 beforeCreate: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //undefined
    console.log(this.message);//undefined
 }

由于此时并没有初始化vm上的数据，因此，this.

e

l

，

t

h

i

s

.

el，this.

el，this.data，this.message都为空。

2.created

此时vm上的数据data，message以初始化，但是this.$el即挂载点并未初始化。

  created: function () {
    console.log(this.$el); //undefined
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

3.beforeMount

此阶段获取挂载点this.$el，其余和created相同。

 beforeMount: function () {
    console.log(this.$el); //已被初始化，内容为： [object HTMLDivElement]，即HTML模板
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

4.mounted

此阶段页面挂载点已被初始化。

 mounted: function () {
    console.log(this.$el); //已被初始化，内容为： [object HTMLDivElement]，即页面元素
    console.log(this.$data); //[object Object]  =>  已被初始化
    console.log(this.message); //Welcome Vue  =>  已被初始化
 },

5. beforeUpdate

在将this.message = 'update’后，beforeUpdate中会看到this.message的值变了，但是页面并没有更新。

6. updated

改变this.message的值后，会在updated后更新页面。但是在updated中更新vm.data数据，不会提现到页面上来。

7.beforeDestroy

在methods中销毁：

### js基础
1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

![js基础.PNG](https://img-blog.csdnimg.cn/img_convert/eeb67215e4a5597fded2c480661394bf.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/3131b108e94f1e65254d4cdf393e0efb.webp?x-oss-process=image/format,png)

>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**



[外链图片转存中...(img-RWWCp0Fo-1715867630781)]

>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**