2024年前端最全前端面试---Vue部分考点梳理，前端面试常问的算法题

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

• 按需要加载 异步加载大组件

5. keep-alive

缓存组件

频繁切换但不需要渲染 （tab选项卡）

Vue常见性能优化之一

6. mixin

多个组件有相同的逻辑 抽离出来

mixin中可能遇到的问题

• 变量来源不明确 不利于阅读

• 多mixin可能会曹成命名冲突

• mixin组件可能会出现多对多的关系 复杂度较高

4. Vuex的使用

---

• state的数据结构设计

• getters

• action

• mutation

• 用于Vue组件

• dispatch

• commit

• mapState

• mapGetters

• mapActions

• mapMutations

5. Vue-router

---

1. 路由模式

• hash

• H5 history

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200509190345146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70)

2. 路由配置

• 动态路由

• 懒加载

二. Vue的原理（大厂必考）

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

1. 组件化 和 MVVM

---

1. 数据驱动试图

• 传统组件 只是静态渲染 更新还要依赖于操作DOM

• 数据驱动试图 - Vue MVVM

• 数据驱动试图 - React setState

2. MVVM

2. 响应式 原理（重点）

---

1. 组件data的数据一旦变化 立刻触发视图的更新

2. 实现数据驱动试图的第一步

3. 核心：API-Object.defineProperty

缺点：

• 深度监听 需要递归到底 一次性计算量大

• 无法监听新增属性和删除属性（Vue.set Vue.delete）

• 无法原生监听数组 需要特殊处理

Vue3.0启用proxy 实现响应式 的缺点：

• proxy的兼容性不好 且无法polyfill

3. vdom和diff

---

1. vdon是实现Vue和React的重要基石

2. diff算法是vdom中最核心 最关键的部分

4. 模板编译

---

5. 渲染过程

---

6. 前端路由

---

三. Vue经典面试题

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

1. v-show 和 v-if 的区别

v-show：通过css样式来控制 就是两个或多个元素中 让其显示的就直接显示 如果让其隐藏的就为其添加display：none

v-if：通过Vue本身的机制控制 就是两个或多个元素中 让其显示的就显示 其他的就不会被加载到浏览器中

以上两者的使用场景：判断是否为频繁切换 元素的显示 如果需要频繁的切换建议使用v-show 如果是一次性的建议使用v-if

2. 为何 v-for 中要用 key

v-for中必须要有key 并且他不能使用index要取和业务相关的值

3. 描述 Vue 中的生命周期（有父子组件的情况）

单组件的生命周期

有父子组件的情况

初始化Vue实例是从外到内 渲染是从内到外的：父组件初始化（created）---- 子组件初始化（created）---- 子组件渲染（mounted）----父组件渲染（mounted）

更新数据逻辑同上

4. Vue 组件如何通讯

父子通讯 ：props和$emit

无关系组件之间通讯：自定义事件

Vuex通讯

5. 描述组件渲染和更新的过程

6. 双向数据绑定 v-model 的实现原理

7. created 和 mounted 的区别

created：把Vue的实例进行初始化 并没有开始渲染

mounted：是组件真正的网页绘制完成了（ajax获取信息 绑定事件等操作需要在这里完成）

8. 在 beforDestroy 中需要做什么？

解除绑定

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

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

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

269页《前端大厂面试宝典》

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

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

前端面试题汇总