面试必备：2021 Vue经典面试题总结

一、什么是MVVM？
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

vue的核心是什么？

数据驱动（视图的内容随着数据的改变而改变）
组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合）

二、vue的优点是什么？

• 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

三、组件之间的传值？

父组件通过标签上:data=data方式定义传值
子组件通过props方法接受数据
子组件通过$emit方法传递参数

四、vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from '../../common/home.vue'

页面按需加载引入方式：
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

五、vuex面试相关

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

（2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

（3） vuex的State特性

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

（4）vuex的Getter特性

getters 可以对State进行计算操作，它就是Store的计算属性。

虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

如果一个状态只在一个组件内使用，可以不用getters。

（5）vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

（6）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

六：computed 有何特点，computed 和 watch，methods 的区别
computed： 有缓存，data 不变不会重新计算；提高性能。
computed 和 methods的区别: computed 计算属性是基于它的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，这意味着只要原属性还没发生改变，多次访问相关属性，计算属性会立即返回之前的计算结果，而不必再次执行函数；而 methods 每当触发重新渲染时，调用方法总会再次执行函数
computed 和 watch的区别：computed 默认只要 getter，不过需要时也可以提供 setter；watch 侦听器，当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的，使用 watch选项允许执行异步操作（访问一个API）,限制我们执行该操作的频率，并在得到最终结果前，设置中间状态，这些都是计算属性无法做到的

总结
computed 和 watch的使用场景：
如果一个数据需要经过复杂计算就用 computed；
如果一个数据需要被监听并且对数据做一些操作就用watch；
watch擅长处理的场景：一个数据影响多个数据；
computed擅长处理的场景：一个数据受多个数据影响
computed 是属性

当需要根据已有数据产生一些派生数据的时候，可使用计算属性
注意：计算属性不支持异步操作，因为计算属性一般要绑定到模板中
更重要的一点是：计算属性会缓存调用的结果，提高性能
计算属性必须有返回值，没有返回值就没有意义

watch 是一个功能：

watch不需要返回值，根据某个数据变化执行xx逻辑
watch可以执行异步操作

七：为何组件 data 必须是一个函数？

防止组件重用的时候导致数据相互影响。

八：Ajax 请求应该放在哪个生命周期

应该放在 mounted 生命周期，JS 是单线程的，Ajax 异步获取数据，放在 mounted 之前没有用，只会让逻辑更加混乱

九：多个组件有相同逻辑，如何抽离？

用 mixin
mixin 的用法：；定义一个 js文件将export default 中的共有内容写到里面，然后在组件中import，放到 mixin数组中

mixin 的一些缺点：
1，变量来源不明，不利于阅读。我们希望编程红的变量和方法是可查找的，但是 mixin 引入的内容编辑是不可寻找,
2，多mixin 可能造成命名冲突
3，迷信和组件可能出现多对多的关系（一个组件引用多个 mixin, 一个mixin被多个组件引用），复杂度较高。多对多是最复杂的关系，很容易剪不断理还乱

十：何时使用异步组件？

加载大组件，路由异步加载

十一：何时需要使用 keep-alive？

缓存组件，不需要重复渲染
如多个静态 tab 页的切换
优化性能

十二：何时需要使用 beforeDestroy？

解除自定义事件 event.$off
清除定时器
解绑自定义的 DOM 事件，如 window scroll等

十三：vuex 中 action 和 mutation有何区别？

action 中处理异步，mutation 不可以
mutation 做原子操作
action 可以整合多个 mutation

十四：vue-router 常用的路由模式

hash 默认：有 #，也就是路由的hash，后面是路由
H5 history(需要服务端支持)：没有 #，需要服务端再次，无特殊需求可选择 hash模式

十五：Vue 常见性能优化方式

合理使用v-show 和 v-if
合理使用computed
v-for 时要加key，以及避免和 v-if 同时使用
自定义事件、DOM 事件及时销毁
合理使用异步组件
合理使用keep-alive
data层级不要太深（因为深度监听一次性监听到底）
使用 vue-loader 在开发环境做模板编译（预编译）
webpack层面的优化
前端通用的性能优化，如果图片懒加载
使用 SSR

十六：diff 算法的时间复杂度

O(n)，在O(n^3)基础上做了一些调整

十七：简述diff算法过程：

patch(elem, vnode) 和 patch(vnode, newVnode)
patchVnode 和 addVnode 和 removeVnode
updateChildren(key 的重要性)

十八：Webpack与gulp区别

Gulp是一种能够优化前端开发流程的工具，
webpack是一种模块化的解决方案 （grunt）

十九：请简述webpack中的loaders与plugin的区别

什么是loaders？
loaders是文件加载器，能够加载资源文件，并对这些文件进行处理，例如，编译，压缩等，最终一起打包到指定文件中。
什么是plugin？
在webpack运行的生命周期会有许多事件，plugin可以监听这些事件

区别：加载器是用来加载文件的，webpack本身只能加载js文件(内置babel-loader)，加载其他文件就需要安装别的loader，比如：css-loader file-loader 。
Plugin是扩展webpack功能的，通过plugin ，webpack可以实现loader不能完成的复杂功能

二十：为什么虚拟 dom 会提高性能?(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

二十一：v-text与{{}}与v-html区别

{{}} 将数据解析为纯文本，不能显示输出html

v-html 可以渲染输出html

v-text 将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示双花括号

v-text 指令：

作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法

v-text与{{}}区别：

v-text与{{}}等价，{{}}叫模板插值，v-text叫指令。

二十二：vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？

需要，原生DOM事件必须要手动销毁，否则会造成内存泄漏

部分内容copy大神的（大神链接 https://shq5785.blog.csdn.net/article/details/89450535，如有侵权请及时联系删除）