2024年Web前端最全前端面试---Vue部分考点梳理(1)，2024年最新web前端面试

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

2. $nextTick

Vue 是异步渲染

data 改变之后 DOM不会立刻渲染

$nextTick 会在DOM渲染之后触发 以获取最新DOM节点

3. slot（插槽）

粗暴的理解成 父组件想要向子组件中插入写东西

1. 基本使用

2. 作用域插槽

3. 具名插槽

4. 动态、异步组件

动态组件：

• :is=“component-name”用法

异步组件：

• import（）函数

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

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）

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

（mounted）----父组件渲染（mounted）

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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