答案:webpack 是一个打包模块化 javascript 的工具，在webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件，webpack 专注构建模块化项目； webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

2、面试题:、webpack 与 grunt、gulp 的不同？

答案:

1、三者之间的区别三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包CSS文件等

? 1.1grunt 和 gulp 是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

? 1.2webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展webpack功能。

2、构建思路的区别?

? 2.1gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个`Task`，并合理控制所有`Task`的调用关系

? 2.2webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工

3、从知识背景区别

? 3.1gulp 更像后端开发者的思路，需要对于整个流程了如指掌?

? 3.2webpack 更倾向于前端开发者的思路

3、webpack的打包流程？

4、如何解决vue第一次加载的时候页面上使用的数据会闪烁?(面试)

关于页面加载会先闪烁，然后再显示内容，的解决办法有三个：

? ? ? ? ? ?1、添加一个属性 v-clock ?在vue框架运行时会把项目中的v-clock属性去掉

? ? ? ? ? ?2、不用el关联，使用$mount

? ? ? ? ? ?3、尽量使用指令

1.界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下
2.vue对象生成data数据时候回去刷新界面把{{msg+"666"}}字符串替换成结果字符串
3.导致界面第一次加载的时候会闪屏
4.解决方案:使用v-html,v-text指令操作,或者css中加[v-cloak] {display:none};

5、Vue中有哪些常用的指令（12分）

v-html? ? v-text? ?v-pre? ?v-cloak 等等，要说出其的用法功能....

6、事件修饰符

- .stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
- .prevent 阻止默认事件
- .capture 添加事件侦听器时让事件在捕获阶段触发
- .self ?其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, ?虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
- .once 事件只触发一次,触发完之后,事件就解绑
- 多修饰符一起使用:连点

7、Vue的核心思想（特点）

1)数据驱动页面

数据驱动-动态数据-响应式数据- data数据源对象中的数据会被劫持到vm对象中页面中的模板会通过特定标识去取出vm对象的数据然后渲染页面 ?如果这个数据变了 ?它会实时的刷新页面

2)组件化开发

8、切换效果的实现：

1.做切换效果的技术--样式绑定

2.组件或者模块的切换-动态组件,v-if/v-show

3.路由切换-router ? ?

9、Vue2.0兼容IE哪个版本以上吗

不支持IE8及以下，部分兼容IE9，完全兼容10以上，以为Vue的响应式原理是基于ES5的Object.defineProperty(),而这个方法不支持IE8及以下

10、Vue自顶向上的增量开发，一共有哪五层？

自底向上的增量开发(5层) ：声明式渲染(vue.js) 、组件化系统 ?、数据仓库（大规模状态系统） ?、开发环境（cli ）、路由

11、MVC与MVVM之间的区别

（1）MVC
在实际应用开发场景中，开发者常用的一种设计模式是MVC（eg：node（后端）中的MVC设计模式）：

- M（Model）：数据模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据。 ?
- V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的。?
- C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

（2）MVVM
- M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。?
- V（View）：视图层。就是展现出来的用户界面。?
- VM（ViewModel）：视图模型层。就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

12、v-if 和v-show 这个两个谁好??

根据它们底层的设计不一样有各自的使用场景
?v-if：采用的是移除元素来切换模块，具有较高的切换消耗,常常用在用户不常切换的模块
?v-show：采用css的隐藏元素（display:none）来切换模式，具有较高的性能消耗,常常用在频繁切换的模块中 ? ?

13、key的意义

data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较

如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM

然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)

解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用

这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来

?key==>让数据跟真实的DOM 一一关联，

使之不发生渲染混乱的情况，提高绘制渲染效率

==> key 的作用主要是为了高效地更新虚拟 DOM

14、三大主流框架的区别？设计思想和使用场景?

1）React
1、子组件重复渲染问题需要手动优化

2、可以使用redux进行状态管理，函数式、不可变、模式化，时间旅行

3、可使用JSX，完全的javascript能力

优点：

引入了一个叫做虚拟DOM的概念，运行速度快；提供了标准化的API，解决了跨浏览器问题、兼容性更好；代码更加模块化，重用代码更容易，可维护性高。

缺点：

React是目标是UI组件，通常可以和其它框架组合使用，并不适合单独做一个完整的框架

2）Vue
1、可使用JSX，但推荐使用模版语言而不是JSX

2、学习曲线平缓优点：渐进式构建能力是Vue.js最大的优势，Vue有一个简洁而且合理的架构，使得它易于理解和构建。Vue有一个强大的充满激情人群的社区，这为Vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。

缺点：

在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑；它类似于Web组件的模式，而不是真正的Web组件。

3）Angular
特点

1、完善的MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能

2、Typescript 脏检查，对脏数据的检查就是脏检查，比较UI和后台的数据是否一致

优点：

模板功能强大丰富并且是声明式的，是一个比较完善的前端MVC框架，自带了丰富的Angular指令；ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮

缺点：

验证功能错误信息显示比较薄弱，需要写很多模板标签；ngView只能有一个，不能嵌套多个视图；比较笨重，没有让用户选择一个轻量级的版本。

15、vue.js 渐进式框架(分层的设计模式)是什么意思？五层设计

16、vue.js 的核心是什么？数据驱动和组件化开发

1）、数据驱动页面（响应式数据）

2）、组件化开发

17、渐进增强、优雅降级是什么？

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不
支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级
浏览器只保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成
的工作流程的差异

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高
级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

18、你知道的常用的框架？至少四个

1、jQuery
jquery是基于JavaScript类库的框架，其中提供了许多JavaScript类库，和一些css样式表的封装，使用起来比较方便，简化了用户与浏览器的交互，提高了系统的性能和开发效率。其封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTMl文档操作，事件处理，动画设计和Ajax交互.
具有独特的链式语法和短小清晰的多功能接口具有高效灵活的css选择器，并且可以对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

优点：（1）快速获取文档元素（2）提供漂亮的页面动态效果（3）创建Ajax无刷新页面 ?https://jquery.com/download/ ?推荐插件库

?2、vue
vue是一套用于构建用户界面的渐进式JavaScript框架，其可以自底向上逐层应用，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目进行整合。而且当与现代化的工具链以及各种支持类库结合使用时，Vue也可以为复杂的单页应用提供驱动。

优点：轻量级框架，简单易学，双向数据绑定，组件化，数据结构分离，虚拟Dom，运行速度快。vue 是单页面应用，是页面局部刷新，不用每次跳转都要请求所有数据和dom，其大大加快了访问速度，提升了用户体验，

缺点：不支持IE8，其生态环境不如react和anguler

?3、react
ReactJS是一套JavaScript Web库，由Facebook打造而成且主要用于构建高性能及响应式用户界面。React负责解决其它javascript框架所面对的一大常见难题，即对大规模数据集的处理。能够使用虚拟DOM并在发生变更时利用补丁安装机制只对DOM中的dirty部分进行重新渲染，React得以实现远超其它框架的速度表现。

优点：（1）不直接对DOM进行操作，引入了一个叫做“虚拟DOM”的概念，安插在javascript逻辑和实际的DOM之间，性能好

(2)虚拟DOM解决了跨浏览器问题，提供了标准化的API，甚至在IE8中都是没问题的。

(3)代码更加模块化，重用代码更容易，可维护性高。

(4) Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

(5)兼容性好

?4、angular
Angular最显著的特征就是其整合性。它是由单一项目组常年开发维护的一体化框架，涵盖了M、V、C/VM等各个层面，不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本，提高决策速度，对需要快速起步的团队是非常有帮助的。

优点：1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；

是一个比较完善的前端MVC框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

自定义Directive(指令)，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；

ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

5、Flutter

最初的设计目标就是跨端, 通过隐藏设备差异、平台UI差异、一次编写，多端运行。开发者只需要掌握Flutter，就可以同时在Android及iOS平台上面发布自己的App。非常适合原型搭建或者小规模的开发团队。

为了尽可能不依赖平台特性， Flutter在Dart虚拟机之上实现了全套的UI组件、手势管理、资源管理、并采用GPU直接渲染的方式。随之而来的结果就是高效的渲染性能及比源生UI更加灵活的表现力。在大大减少了适配工作的同时，很好的保障了低端设备的流畅度。

19、谈谈对Vue框架的理解

简单来说，vue就是一个用于创建用户界面的渐进式的Javascript框架。
它有3个优点：

第一个是采用组件化模式，把html、css、js等组合封装成一个vue组件，这个vue组件是可以重复使用的，这样的话就大大提高了代码的利用率，以及代码维护起来会更加方便。
第二个是声明式编码，程序员可以直接在页面上用vue指令循环遍历数据源，不用手动操作DOM节点，提高软件开发效率。
第三个是采用虚拟DOM和利用Diff算法，把后台的数据传到虚拟DOM中，利用Diff算法比较前后数据更新的变化，这样就可以尽量地复用DOM节点，优化性能。

（思路：1、一句话定位 2、详细面概述每一个知识点 3、自己的见解）

20、谈谈对React的理解

21、谈谈你对MVVM原理的理解

M就是Model模型，对应Vue实例中的data函数，V就是View视图，对应Vue中的模拟，VM就是ViewModel视图模型，对应Vue实例。
传统的前端需要手动地操作DOM节点来渲染页面，而MVVM模式就直接把后台的数据挂载到Vue实例中。
ViewModel会自动把Model中的数据渲染到View视图中，而当View视图发生变化时，ViewModel也会更新Model层的数据，所以ViewModel是View和Model之间的桥梁，这是一个双向的过程，也就是MVVM是一个数据双向绑定的过程。
这样的好处，就是可以把前后端独立分离开来，提高软件开发效率。

22、计算属性和方法的区别

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，
提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性

methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍?
方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

（刷新页面：模板重新渲染、重新取值）