前端面试题二(持续更新)

webpack是什么?作用是什么? 默认的入口文件什么?

webpack是什么?

• webpack的诞生之初主要是想解决代码的拆分问题。
• webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。

作用是什么?

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

• 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包，来保证我们项目结构的清晰和可读性。
• 编译兼容。在以前，我们总是要手写一堆浏览器兼容代码，这让人很头皮发麻，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
• 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

默认的入口文件什么?

webpack 默认的入口文件是 src/index.js，我们可以通过在webpack.config.js中去配置 entry 属性来对入口文件进行修改。

module.exports = {
    entry: './public/index.js'
}
1
2
3

#默认入口文件
 ./src/index.js
#默认出口文件
./dist/main.js
1
2
3
4

webpack打包命令是什么? 打包的文件默认存在什么地方?

• 打包命令npm run build

(这个命令会告诉webpack打包工具去执行package.json里面的scripts对象的build的脚本，也就是说实际执行的是webpack --config webpack.prod.js) 。

• 打包的文件默认存在:根路径/dist/main.js

webpack的loader有哪些? 作用是什么? babel的作用是什么?

webpack的loader有哪些?以及作用

在页面开发过程中，我们经常性加载除了 js 文件以外的内容，这时候我们就需要配置响应的 loader 进行加载

常见的 loader 如下：

• style-loader: 将 css 添加到 DOM 的内联样式标签 style 里
• css-loader :允许将 css 文件通过 require 的方式引入，并返回 css 代码
• less-loader: 处理 less
• sass-loader: 处理 sass
• postcss-loader: 用 postcss 来处理 CSS文件
• autoprefixer-loader: 处理 CSS3 属性前缀，已被弃用，建议直接使用 postcss
• file-loader: 分发文件到 output 目录并返回相对路径
• url-loader: 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url
• html-minify-loader: 压缩 HTML
• babel-loader :用 babel 来转换 ES6 文件到 ES5

babel的作用是什么?

babel是一个node命令行工具,将es6语法转换为浏览器能解析的es5语法的一种工具

webpack的plugin有哪些(HtmlWebpackPlugin和webpack-dev-server)?作用是什么?

常见的plugin

BannerPlugin：在每个生成chunk顶部添加banner

CopyWebpackPlugin：将单个文件或整个目录复制到构建目录中

DefinePlugin：允许在编译时配置的全局变量

ContextReplacementPlugin：重写requier表达式的推断上下文

IgnorePlugin：从bundel中排出某些模块

HtmlWebpackPlugin和webpack-dev-server的作用是什么？

HtmlWebpackPlugin的作用：简单创建HTML文件，用于服务器访问

webpack-dev-server的作用：

• webpack-dev-server是webpack官方提供的一个小型node.js Express服务器。使用它可以为webpack打包生成的资源文件提供web服务
• **主要提供两个功能：**为静态文件提供服务、自动刷新和热替换

通过配置proxy实现请求转发，即当接口域名发生改变时，我们不用一个一个修改接口，只要修改配置项的域名就可以了

通过配置historyFallback为true，解决请求不到页面问题，如果访问除根路径以外的地址，最终都会转向去请求根路径。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QFxRB6Am-1657025508557)(https://segmentfault.com/img/remote/1460000018695137/view?w=1392&h=1724)]

什么是渐进式框架? 优点是什么?

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

• ==什么是渐进式框架：==就是我们想用或者能用的功能特性，我们不想用的部分功能可以先不用。VUE不强求我们一次性接受并使用它的全部功能特性。
• 优点： 当我们的项目规模逐渐的变大，我们可能会逐渐用到前端路由、vuex、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

什么是前端工程化? 好处是什么?

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。最终落实到细节上，就是实现前端的“4 个现代化”： 模块化、组件化、规范化、自动化。

前端工程化的好处主要体现在如下两方面：

① 前端工程化让前端开发能够“自成体系”，覆盖了前端项目从创建到部署的方方面面。 (极大提升开发效率 )

② 最大程度地提高了前端的开发效率，降低了技术选型、前后端联调等带来的协调沟通成本。 (降低大型项目的开发难度 )

单页面应用程序有什么优缺点? 缺点如何解决?

单页面应用：

单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

优点：

1. 用户体验好、快，内容的改变不需要重新加载整个页面
2. 良好的前后端工作分离模式
3. 减轻服务器压力
4. 具有桌面应用的即时性、网站的可移植性和可访问性

缺点：

1. 首屏加载慢

   解决办法：

   • Vue-router懒加载
   • 异步加载组件
   • 服务端渲染
   • 使用CDN加速

2. 不利于SEO

   解决办法：

   • 服务端渲染
   • 路由采用h5 history模式
   • 页面预渲染

3. 不适合开发大型项目

MVVM模式是什么？MVC模式是什么?

MVVM模式

MVVM模式是一种软件的架构模式，是（Model-View-ViewModel）的缩写，其核心是VM，VM是视图与模型之间的桥梁，它实现了视图与模型的相互映射。

在MVVM中模型的改变会引起视图的改变，视图的改变会引发模型的改变。

MVC模式

MVC模式是一种软件设计的典范，一种组织代码的方法。

M 是 model 模型
V 是 view 视图
C 是 control 控制器
1
2
3

控制器是用来将不同的view和不同的model组织在一起。

key如果用索引会出现什么问题

key值用index可能会造成数据错乱
1

什么情况下,数组或者对象的数据产生变动, 视图不更新? 解决方案是什么?(2种)

vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view.

1.使用 $set() 方法手动设置;

	$set(targetObj,key,value)//接受三个参数,(目标对象,属性名/index,属性值)
	eg:$set(list,0,'aaa')//把数组第0项修改为'aaa'
	
2.使用 $forceUpdate() 方法强制更新;	

	eg: list[0]='aaa';
		$forceUpdate()

1
2
3
4
5
6
7
8
9
10

Vue能监测到数组变化的方法：

push() - pop() - shift() - unshift() - splice() - sort() - reverse()

虚拟DOM是什么?diff算法如何比较新旧虚拟DOM(从根元素说起)?

虚拟DOM就是一个普通的JavaScript对象，包含了tag、props、children三个属性。本质是保存DOM关键信息的JS对象

虚拟DOM好处?

1. 提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM(打补丁)

diff算法如何比较新旧虚拟DOM?

• 同级比较
• 如果根元素变化：删除重新建立整个DOM树
• 根元素未变，属性改变：DOM复用，只更新属性
• 根元素未变，子元素内容改变：1.无key-就地更新 2.有key-按key比较

v-for的key值有什么讲究?作用是什么?key用index可能会造成数据错乱

讲究：v-for中key属性的值应唯一，有id用id, 无id用索引

好处：可以配合虚拟DOM提高更新的性能 ，起到身份认证的作用，避免v-for“就地更新”策略导致的问题。

key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;

官方说法：v-for中key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

v-model的本质是什么?

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

语法糖简单来说就是便捷写法，

v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"


:value='num' 和 @input="num = $event.target.value"
1
2
3
4

v-model不仅是语法糖还有一定的副作用

副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"


:value='num' 和 @input="num = $event.target.value"
1
2
3
4

v-model不仅是语法糖还有一定的副作用

副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

v-model是单向数据流：子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。