2024最新Vue面试题含源码解析，2024年最新大厂Web前端高级面试题汇总解答

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

• 实在避免不了，可用computed计算属性提前过滤列表

Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

---

// 源码中找答案：src/core/instance/state.js > initData()

• 组件需要是函数，根实例可以是对象

• Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致他们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在改限制，也是因为根实例只能有一个，不需要担心这种情况

你知道vue中key的作用和工作原理吗？说说你对它的理解

---

// 源码中找答案：src/core/vdom/patch.js > updateChildren()

• key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，是的整个patch过程更加高效，减少DOM操作量，提高性能。

• 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug

• vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

谈一谈对vue组件化的理解

---

• 组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用。

• 组件化开发能大幅提高应用开发效率、测试性、复用性。

• 组件使用按分类有：页面组件、业务组件、通用组件

• vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，他们基于VueComponent，扩展于Vue

• vue中常见组件化技术有：属性prop，自定义事件，插槽等，他们主要用于组件通讯、扩展等

• 合理的划分组件，有助于提升应用性能

• 组件应该是高内聚、低耦合的

• 遵循单向数据流的原则

谈一谈对vue设计原则的理解

---

• 渐进式javacript框架

• 易用性

• 灵活性

• 高效性

谈谈你对MVC、MVP、MVVM的理解

---

• 这三者都是框架模式，它们设计的目标都是为了解决Model层和View层解耦问题。

• MVC模式(model view Controller)出现较早主要应用在后端，如php，在前端领域的早期也有应用，如Backbone.js。他的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题

• MVP模式(model view Presenter)是mvc的进化形式，Presenter作为中间层负责MV通信，解决了两者耦合问题，但是P层过去臃肿会导致维护问题。

• MVVM模式(model view viewmodel)在前端领域有广泛应用，它不仅解决了MV解耦问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

你了解哪些Vue性能优化方法

---

• 路由懒加载

const router = new VueRouter({

routes:[

{

path:‘/foo’,

component:() => import(‘./Foo.vue’)

}

]

})

• keep-alive缓存页面

• 使用v-show复用DOM

11111

222222

• v-for时加key，以及避免和v-if同时使用

v-for = “user in activeUsers”

:key = “user.id”

{{ user.name }}

• 事件销毁

created(){

this.timer = setInterval(this.refresh,2000)

},

beforeDestroy(){

clearInterval(this.timer)

}

• 图片懒加载(vue-lazyload)

• 第三方插件按需引入

import Vue from ‘vue’

import { Button,Select } from ‘element-ui’

Vue.use(Button)

Vue.use(Select)

• 无状态的组件标记为函数式组件

• 子组件分割

• 长性能列表的优化

• 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应式

export default {

data: () => ({

users:[]

})

async created(){

const users = await axios.get(‘/api/users’)

this.users = object.freeze(users)

}

}

• 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域内容

描述Vue组件生命周期（父子组件）

---

• 见上文梳理

Vue组件如何通讯（常见）

---

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

---

• 执行render函数 触发 getter 收集依赖到 watcher

• 更新的时候 触发 setter 通知 watcher 触发 re-render 渲染

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

---

• input 元素的 value = this.name

• 绑定input事件 this.name = $event.target.value

• data 更新触发re-render

对MVVM的理解

---

computed 有何特点

---

• 缓存，data不变不会重新计算

• 提高性能

ajax请求应该放在哪个生命周期

---

• mounted （整个渲染完成，dom渲染完成）

• js是单线程，ajax异步获取数据

如何将组件所有props传递给子组件

---

• $props

• <User v-bind="$props">

何时需要使用beforeDestory

---

• 解绑自定义事件 event.$off

• 清楚定时器

• 解绑自定义的DOM事件，如window scroll 等

Vuex中action和mutation有何区别

---

• action中处理异步，mutation不可以

• mutation做原子操作

• action 可以整合多个mutation

请用vnode描述一个DOM结构

---

{

tag:‘xx’,

props:{

id:‘xx’

},

children:[

tag:‘xx’,

children:“xxx”

]

}

简述diff算法过程

---

• patch(elm,vnode) 和 patch(vnode,newVnode)

• patchVnode 和 addVnodes 和 removeVnode

• updateChildren（key的重要性）

你对Vue3.0的新特性有没有了解

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

• patch(elm,vnode) 和 patch(vnode,newVnode)

• patchVnode 和 addVnodes 和 removeVnode

• updateChildren（key的重要性）

你对Vue3.0的新特性有没有了解

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-FxE43YWe-1713340413889)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！