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' }#默认入口文件 ./src/index.js #默认出口文件 ./dist/main.js
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 可以提供较为流畅的用户体验。
优点：
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端工作分离模式
- 减轻服务器压力
- 具有桌面应用的即时性、网站的可移植性和可访问性
缺点：
首屏加载慢
解决办法：
- Vue-router懒加载
- 异步加载组件
- 服务端渲染
- 使用CDN加速
不利于SEO
解决办法：
- 服务端渲染
- 路由采用h5 history模式
- 页面预渲染
不适合开发大型项目
MVVM模式是什么？MVC模式是什么?
MVVM模式
MVVM模式是一种软件的架构模式，是（Model-View-ViewModel）的缩写，其核心是VM，VM是视图与模型之间的桥梁，它实现了视图与模型的相互映射。
在MVVM中模型的改变会引起视图的改变，视图的改变会引发模型的改变。
MVC模式
MVC模式是一种软件设计的典范，一种组织代码的方法。
M 是 model 模型 V 是 view 视图 C 是 control 控制器控制器是用来将不同的view和不同的model组织在一起。
key如果用索引会出现什么问题
key值用index可能会造成数据错乱
什么情况下,数组或者对象的数据产生变动, 视图不更新? 解决方案是什么?(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()Vue能监测到数组变化的方法：
push() - pop() - shift() - unshift() - splice() - sort() - reverse()
虚拟DOM是什么?diff算法如何比较新旧虚拟DOM(从根元素说起)?
虚拟DOM就是一个普通的JavaScript对象，包含了
tag、props、children三个属性。本质是保存DOM关键信息的JS对象虚拟DOM好处?
- 提高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"v-model不仅是语法糖还有一定的副作用
副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。
v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event" :value='num' 和 @input="num = $event.target.value"v-model不仅是语法糖还有一定的副作用
副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。
v-model是单向数据流：子组件不能改变父组件传递给它的prop属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。