web前端工程师面试题—2021(推荐收藏以便临阵磨枪)

入门且备受面试官喜爱的题，如果你这样回答，面试官都不得不高看你一眼（持续更新，收藏绝对错不了！）

文章目录

• 前言
• 一、对 SPA 单页面应用的理解，优缺点是什么
• 二、new Vue() 发生了什么
• 三、Vue.use是干什么的？原理是什么
• 四、 请说一下响应式数据的理解
• 五、Vue如何检测数组变化
• 六、Vue.set 方法是如何实现的
• 七、Proxy 与 Object.defineProperty 优劣对比
• 八、Vue3.x响应式数据原理
• 九、Vue的生命周期方法有哪些？一般在哪一步发起请求及原因
• 十、生命周期钩子是如何实现的
• 十一、Vue 的父组件和子组件生命周期钩子执行顺序
• 十二、Vue中的组件的data 为什么是一个函数
• 十三、Vue 组件间通信有哪几种方式
• 十四、Vue中模板编译原理
• 十五、组件中写 name选项有哪些好处及作用
• 十六、keep-alive平时在哪里使用？原理是
• 十七、Vue.minxin的使用场景和原理
• 十八、Vue-router有几种钩子函数？具体是什么及执行流程是怎样的
• 十九、nextTick在哪里使用？原理是
• 二十、Vue 为什么需要虚拟DOM？ 虚拟DOM的优劣如何
• 二十一、Vue中key的作用和工作原理，说说你对它的理解
• 二十二、v-if 与 v-for的优先级
• 二十三、v-if与v-show的区别
• 二十四、computed 和 watch 的区别和运用的场景
• 二十五、如何理解自定义指令
• 二十六、V-model的原理是什么
• 二十七、Vue性能优化
• 二十八、MVC和MVVM的区别
• 二十九、原型链
• 三十、说说异步编程
• 总结

前言

如何套路得人心

1?先说这个点的明确定义，或者是特性；

2?再说具体的应用场景；

3?说说自己的看法、观点；

4?可以稍微举一反三，说说同类特性，或者类似的框架，更好的方案。

一、对 SPA 单页面应用的理解，优缺点是什么

核心：

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

1）用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

2）SPA 相对对服务器压力小；

3）前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

1）首屏（初次）加载慢：为实现单页面 Web 应用功能及显示效果，需要在加载资源的时候将JavaScript、CSS 统一加载，部分页面按需加载；

2）不利于 SEO：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

二、new Vue() 发生了什么

核心：

1）结论：new Vue()是创建Vue实例，它内部执行了根实例的初始化过程。

2）具体包括以下操作：

• 选项合并

• $ children，$ refs，$ slots，$createElement等实例属性的方法初始化

• 自定义事件处理

• 数据响应式处理

• 生命周期钩子调用 （beforecreate created）

• 可能的挂载

3）总结：new Vue()创建了根实例并准备好数据和方法，未来执行挂载时，此过程还会递归的应用于它的子组件上，最终形成一个有紧密关系的组件实例树。

三、Vue.use是干什么的？原理是什么

核心：
vue.use 是用来使用插件的，我们可以在插件中扩展全局组件、指令、原型方法等。
1?检查插件是否注册，若已注册，则直接跳出；

2?处理入参，将第一个参数之后的参数归集，并在首部塞入 this 上下文；

3?执行注册方法，调用定义好的 install 方法，传入处理的参数，若没有 install 方法并且插件本身为 function 则直接进行注册；

1. 插件不能重复的加载

install 方法的第一个参数是vue的构造函数，其他参数是Vue.set中除了第一个参数的其他参数； 代码：args.unshift(this)

2. 调用插件的install 方法 代码：typeof plugin.install === ‘function’

3. 插件本身是一个函数，直接让函数执行。 代码：plugin.apply(null, args)

4. 缓存插件。 代码：installedPlugins.push(plugin)

四、 请说一下响应式数据的理解

核心：
根据数据类型来做不同处理，数组和对象类型当值变化时如何劫持。

1)对象内部通过defineReactive方法，使用Object.defineProperty() 监听数据属性的 get 来进行数据依赖收集，再通过 set 来完成数据更新的派发；

2. 数组则通过重写数组方法来实现的。扩展它的 7 个变更法，通过监听这些方法可以做到依赖收集和派发更新；( push/pop/shift/unshift/splice/reverse/sort )

这里在回答时可以带出一些相关知识点 （比如多层对象是通过递归来