Vue经典面试题

1.说出几种vue当中的指令和它的用法?

答: v-model双向数据绑定; v-for循环; v-if v-show显示与隐藏; v-on事件; v-once: 只绑定一次，v-bind:属性名 绑定属性 v-text解析文本，v-html 解析HTML结构。

(提问的时候会比较详细，自己总结我们学过的所有的指令)

2.vue-loader是什么?使用它的用途有哪些?

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理。

vue文件的一个加载器，将template/js/style转换成js模块。 用途: js可以写es6、 style样式可以scss或less、template可以加jade

3.axios是什么?怎么使用?

答:请求后台资源的模块。
npm install axios --save装好，js中使用import进来, 然后get或.post。返回在.then函数中如果成功，失败则是
在.catch函数中。

4.单页面应用和多页面应用区别及优缺点

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

5.谈谈对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；

View：代表UI视图，负责数据的展示；

ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

• Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
• View（视图） - 视图代表模型包含的数据的可视化。
• Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

6.前端如何优化网站性能

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次该资源，直请求该资源时，如果资源已经存在就不需要到服务器重新请求接在本地读取该资源。

4、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换

7.vue中样式绑定语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVrBlOsx-1621301531188)(C:\Users\赵亚飞\AppData\Roaming\Typora\typora-user-images\image-20210316200413500.png)]

8.vue的特点是什么

1.国人开发的一个轻量级框架。
2.双向数据绑定，在数据操作方面更为简单。
3.视图，数据,结构分离,不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。
4.组件化，方便封装和复用
5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作

9.v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏。
不同点:实现本质方法不同。
v-show本质就是通过控制css中的display设置为none,控制隐藏，只会编译-次; v-if是动态的向DOM树内添加
或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结:如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用V-
if (初始渲染开销较小，切换开销比较大)

10.如何避免回调地狱？

模块化：将回调函数转换为独立的函数

使用流程控制库，例如【aync】

使用promise

使用aync/awaitM

• 什么是回调地狱(函数作为参数层层嵌套)
• 什么是回调函数(一个函数作为参数需要依赖另一个函数执行调用)
• 如何解决回调地狱
  • 保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨)
  • 模块化(函数封装,打包，每个功能独立,可以单独的定义一个js文件Vue,react中通过import导入就是一种体现)
  • 处理每一个错误
  • 创建模块时的一些经验法则
  • 承诺/生成器/ES6等
• Promises:编写异步代码的一种方式，它仍然以自顶向下的方式执行，并且由于鼓励使用try / catch样式错误处理而处理更多类型的错误
• Generators:生成器让你“暂停”单个函数，而不会暂停整个程序的状态，但代码要稍微复杂一些，以使代码看起来像自上而下地执行
• Async functions:异步函数是一个建议的ES7功能，它将以更高级别的语法进一步包装生成器和继承

11.使用NPM有哪些好处？

1、通过NPM,你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
2、对于Node应用开发而言，你可以通过package. json文件来管理项目信息，配置脚本，以及指明依赖的具体
版本
3、npm install xx -S和npm install -D的命令含义
4、npm uninstall xx是什么意思
5、项目转换的时候，不会把node_ modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来
(npm install安装所有的依赖)

12.简述vue中每个生命周期具体适合哪些场景？

**beforeCreate：创建前，**此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
data，computed，watch，methods 上的方法和数据均不能访问。
可以在这加个loading事件。
**created：创建后，**此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
可访问 data computed watch methods 上的方法和数据。
初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
可以在这里结束loading事件，还做一些初始化，实现函数自执行。
未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。
**beforeMount：挂载前，**虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
**mounted：挂载，**完成创建vm.$el，和双向绑定
完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
可在这发起后端请求，拿回数据，配合路由钩子做一些事情。
beforeUpdate：数据更新前，数据驱动DOM。
在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
可在更新前访问现有的DOM，如手动移出添加的事件监听器。
updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），会陷入死循环。
activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
deactivated：组件被移除时使用。
beforeDestroy：销毁前，
可做一些删除提示，如：您确定删除xx吗？
**destroyed：销毁后，**当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。
这时组件已经没有了，无法操作里面的任何东西了。

13、一次完整的HTTP事务是怎么一个过程

1.域名解析

2.发起TCP的3次握手

3.建立TCP连接后发起http请求

4.服务器响应http请求

5.浏览器得到html代码

6,浏览器解析html代码，

7.并请求html代码中的资源（如js、css、图片等）

8.浏览器对页面进行渲染呈现给用户