2024年Web前端最新2024最新Vue面试必胜宝典，大厂面试题解析_vue前端大厂面试(2)，准备面试了很紧张怎么办

最后

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

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

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

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

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

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

2. vue 的双向绑定的原理（腾讯医典）

a)
数据双向绑定是
通过数据劫持结合发布者-订阅者模式的方式来实现的。

b)
具体实现流程：

1. 实现一个监听器 Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者
2. 实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图
3. 实现一个解析器 Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

c)
把下面的流程图说清楚就差不多了：

**3. Vue1.x 的设计理念是什么？2.x 的呢？（**58 同城）

Vue1.x 设计理念

• a) 早期 Vue 是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用，当有数据变化时进行对应的操作。
• b) 少量数据更新对比 Virtual DOM 性能更好，坏处是大量数据更新、初始渲染性能、对比 Virtual DOM 性能更差
• c) 图解：
• 

Vue2.x 设计理念

1. Vue2.0 引入了虚拟 dom

• 通过建立虚拟 dom 树, document.createDocumentFragment()，方法创建虚拟 dom 树。一旦被监测的数据改变，会通过 Object.defineProperty 定义的数据拦截，截取到数据的变化。

2. 截取到的数据变化，从而通过订阅——发布者模式，触发 Watcher（观察者）,从而改

变虚拟 dom 的中的具体数据。

3. 最后，通过更新虚拟 dom 的元素值，从而改变最后渲染 dom 树的值，完成双向绑定。

应用篇：

1. Key 的作用是什么？可以用数组的 index（下标）代替么？（美团）

• a) key 的作用主要是为了高效的更新虚拟 DOM。另外 vue 中在使用相同标签 名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们。否则 vue 只会替换其内部属性而不会触发过渡效果
• b) key 不能用 index 代替，index 在同一个页面会有重复的情况，违背了高效渲染的初衷。

**2. Vue 组件中 data 为什么必须是函数？（**58 同城）

• a) 在 new Vue() ， data 是 可 以 作 为 一 个 对 象 进 行 操 作 的 ， 然 而 在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。
• b) 当 data 选项是一个函数的时候，每个实例可以维护一份被返回对象的独立 的拷贝，这样各个实例中的 data 不会相互影响，是独立的。

3. $route 和 $router 的区别是什么？（深信服）

• a) $router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
• b) $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个 route对象，是一个局部对象，包含 path，params，hash，query，fullPath，matched， name 等路由信息参数。

Vue 3.0

A. 响应式优化

1. 为什么要用 Proxy API 替代 defineProperty API？

• a) defineProperty 的局限性的最大原因是它只能针对单例属性做监听，Vue2.x 中对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
• b) 在Vue 中使用下标的方式直接修改属性的值或者添加一个预先不存在的对 象属性是无法做到 setter 监听的，这是 defineProperty 的局限性。
• c) Proxy 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听 操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代 码。
• d) Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访 问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进 行过滤和改写。

2. 响应式是惰性的

• a) 在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的 变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对 象数据都变成响应式的，这无疑会有很大的性能消耗。
• b) 在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变 化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正 访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
• c)Proxy 基础用法：

B. 编译优化

3. Vue3.0 编译做了哪些优化？

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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