2024年最新Vue2面试题(1)，2024年最新华为外包前端面试题

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

• 组件之间的传值方式有哪些？

• computed和watch的区别？

• 谈一下key值的作用？说一下diff算法？

• 为什么用中括号操作数组，Vue不更新页面？

• Vue的生命周期？

• Vue事件绑定原理说一下？

• Vuex说一下？

• 不需要响应式的数据应该怎么处理？

• 父子组件生命周期顺序？

• 说说nextTick的用处？场景？

• Vue的SSR？

• 小知识点

说一下Vue优缺点？

---

优：渐进式，组件化，轻量级，虚拟dom，响应式（渐进式的意思是想用哪些功能随你）

缺：单页面不利于seo，不支持IE8以下，首屏加载时间长

淘汰掉Jquery就是因为直接操作DOM繁琐、性能问题

Vue与React的异同点？

---

同：虚拟dom、组件化、单向数据流、支持服务端渲染

异：React使用JSX，Vue使用template；React手动(setState)，Vue自动(初始化已响应式）；React单向绑定，Vue双向绑定；React的Redux，Vue的Vuex；fiber暂不熟悉

说一下MVVM是什么？和MVC的区别？

---

M是model模型、也就是数据；V是view视图；也就是DOM看到的页面；VM是他们的桥梁、也就是Vue实例、负责通知数据变化更新视图。

MVVM和MVC的区别也就是VM和C的区别；C是Controller控制器、需要手动控制数据在视图层的显示、VM则实现双向数据绑定。

我理解就是MVVM不用直接操作dom，是呀虚拟dom加快页面渲染速度

路由模式以及不同点？

---

hash模式：通过#号后面的内容的更改，触发hashchange事件、实现路由切换

history模式：通过pushState和replaceState切换url、触发popstate事件、实现路由切换

使用过哪些Vue的修饰符呢？使用过哪些Vue的内部指令呢？

---

列举几个常见的：.trim、.number、.prevent、.once、v-pre、v-cloak

v-text是更新元素的textContent、v-html是更新元素的innerHTML

v-model可以由哪两个指令代替？

---

:value =“message” @input =“message = $event.target.value”

v-if和v-show的区别和使用场景？

---

v-show 是控制元素的dispaly:none属性

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for和v-if的优先级？谁在外层？

---

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

所以一般把v-if写在外层

为什么data是个函数？

---

为了不让数据起冲突，data是函数，每次调用这个函数拿到的返回值互不影响

Vue2的双向数据绑定原理？

---

利用Object.defineProperty实现的、Vue在初始化数据的时候，会使用Object.defineProperty重新定义给data中所有属性加getter/setter，当页面使用对应属性时，首先进行依赖收集（收集当前组件的watcher），如果属性发生变化会通知相关依赖进行更新操作（发布订阅🧡）

Vue中数据代理？

---

• 通过vm对象来代理data对象中属性的操作（读/写）

• 好处：更加方便的操作data中的数据

• 基本原理：

通过Object.defineProperty()把data对象中所有属性加到vm上

为每一个添加到vm上的属性，指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

组件之间的传值方式有哪些？

---

props、自定义事件（$emit、ref）、EventBus、发布订阅、本地存储、vuex、$parent与$children、（provide和inject暂不清楚怎么使用）

computed和watch的区别？

---

computed能做的事情，watch都能做，两个都能实现的时候优先使用computed

computed可以缓存，不能处理异步操作

watch可以处理异步操作

computed 多对一；watch 一对多

watch的属性：

​ deep: true, // 是否进行深度监听

​ immediate: true // 是否初始执行handler函数

谈一下key值的作用？说一下diff算法？

---

作为虚拟DOM的标识、让vue对比新旧节点时、更快更高效

diff算法：

1. 新旧虚拟dom如果找到相同key

*   若dom内容没变、直接使用之前真实dom

*   如果变了、生成新真实dom替换之前的

2. 如果没有相同key

*   直接生成真实dom

​ 3. 最小力度是标签、同层节点对比…

key的选择：

如果不存在对数据的逆序操作（如果还有输入类节点、渲染也会出问题）、仅用于渲染列表展示可以选择index作为key、有数据唯一标识的时候、最好还是选择唯一标识

为什么用中括号操作数组，Vue不更新页面？

---

对象不更新：是因为Object.defineProperty没有对对象的新属性进行属性劫持，使用this.$set方法解决

数组不更新：是因为监测数组不像检测对象，没有getter和setter，应该使用push等方法来操作数组、这类方法已经被Vue所管理、不完全同于原生方法。(data中数组重写原型链，使用 push方法相当于使用了Vue自己的方法来更新视图)

Vue的生命周期？

---

4对生命周期、常用的是mounted和beforeDestory

``mounted发请求，初次渲染数据等；beforeDestory`用于清除定时器、清除消息发布等

• beforeCreate和created之间、初始化数据：数据监测，数据代理

• created和beforeMount之间、解析模板、生成虚拟DOM

• beforeMount和mounted之间、将内存中虚拟DOM转为真实DOM

• beforeUpdate和updated之间、生成新的虚拟DOM与旧的比较并完成model=>view的更新

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！