面试题-全

Senora

已于 2023-04-23 17:02:00 修改

阅读量470

点赞数 1

分类专栏：前端其他文章标签： 1024程序员节 html css javascript vue.js

于 2022-10-24 12:09:51 首次发布

本文链接：https://blog.csdn.net/Senora/article/details/127489911

版权

前端其他专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML + CSS

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE:trident 内核

Firefox：gecko 内核

Safari:webkit 内核

Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核

Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

2、每个 HTML 文件里开头都有个很重要的东西， Doctype，知道这是干什么的吗？

告诉浏览器将以何种规范（xhtml，html）解析页面

3、Quirks 模式是什么？它和 Standards 模式有什么区别

Quirks(怪异模式) 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式范（xhtml，html）解析页面

原理：设置DTD参数，当 DTD为真时，采用标准模式，不然就为怪异模式。
DTD(Document Type Definition) 是一套关于标记符的语法规则

区别：

1.盒模型下区别：

Quirks模式下内容+padding+border

标准模式下边框+内容

2：属性区别：

Quirks 模式下给行内元素设置 width和 height 会生效

标准模式下不会生效

4.div+css 的布局较 table 布局有什么优点？

改版的时候更方便只要改 css 文件。
页面显示简洁、加载速度更快、结构化清晰。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

5.img 的 alt 与 title 有何异同？ strong 与 em 的异同？

alt属性：是指图片无法正常显示时，替换的文字信息

title属性：是指当用户选中图片是，显示的图片描述信息

同：都是提示文字

strong：粗体强调标签，强调，表示内容的重要性

em：斜体强调标签，更强烈强调，表示内容的强调点

同：都是强调标签

6.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强：针对低版本浏览器进行，构建页面，保证最基本的功能，在针对高级浏览器进行，效果，交互，等改进和追加功能。优化用户体验

优雅降级：一开始就针对高版本浏览器进行构建页面，然后在针对低版本浏览器进行兼容

区别：

渐进增强：自下而上进行构建页面

优雅降级：自上而下进行构建页面

7.为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

8、请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，最终提高网站易用性

9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

区别	cookie	localStorage	sessionStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	除非被手动清除，否则将会永久保存。	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除.
存放数据大小	4KB左右	5MB	5MB
http请求	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	同左
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	同左
.		localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重启浏览器而丢失，如果只将用户信息保存到vuex中，那么刷新页面的时候数据就会丢失

10 简述一下 src 与 href 的区别

区别	src	href
全拼	Source源	Hypertext Reference
请求资源类型	是在请求src资源的时候进行指向的资源下载并应用到文档中	是指超文本引用，用来建立当前元素和文档之间的连接
作用结果	用于替换当前元素	用于在当前文档和引用资源之间确立联系
浏览器的解析方式	被解析时会暂停其他资源的下载和处理，并且把该资源加载编译完成	在文档中进行添加时，浏览器识别到这个文档并命名为CSS文件，就会下载合并资源，同时也不会停止对当前文档的处理

11、知道的网页制作会用到的图片格式有哪些？

jpg(有损压缩)； png(透明)； webp； svg； gif(动,透明,有损压缩)； hpeg

在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

12、弹性盒模型

弹性盒模型是css3的一种新的布局方式，

是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。

设置盒子为 display：flex 即是弹性盒模型

13、回流和重绘

回流：

当render tree（渲染树）中的一部分(或全部) 因为元素的布局（规模尺寸，位置，隐藏等）改变而需要重新构建。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。

重绘：

当render tree中的一些元素的外观改变，不影响布局，比如background-color。

回流必重绘，重绘不一定回流

14、元素居中(内联元素,内联块元素,块元素)

//内联元素： 

    设置 text-aglin：center  
         line-hight：父元素高度

//内联块元素：

    1. 让父级的行高=高度，然后设置 text-align
    2. 子级设置成 vertical-align：middle 和父级的行高配合使用
     
//块级元素：父元素设置相对定位

         子元素设置绝对定位
         left：0；
         top：0；
         margin：auto

15、seo

seo是一种网页搜索引擎，符合seo规则的网页，排名会靠前

seo优化：

1、页面标题（Page Title）的关键词优化（必须列出信息的标题、网站的名称以及相关关键字）

2、图片的关键词优化（图片无法按加载，有说明文字）

3、避免表格的嵌套(搜索引擎通常只读取3个

table的嵌套）

4、网站结构的扁平化规划

目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母

16、html5的新增特性.

语义化标签 header，nav，footer

视频和音频 video，audio

canvas 绘图

SVG绘图

新增表单元素：

//进度条

//刻度值

新增input输入特性：

color：选取颜色

date：选取日期

month：选取月份

autocomplete：自动提示

pattern：正则验证

<input name="tel" pattern="^(\+86)?1\d{10}$">

但其不支持ie8及ie8以下版本的浏览器

17、css3里面常用的属性

box-shadow 阴影

box-sizing：border-box 怪异盒模型

background-size 调整背景图片的大小

text-shadow 文字阴影

word-wrap 是否允许断自动换行

border-radius 圆角边框

18、 px rpx em rem vh vw

px： 绝对长度单位，来描述一个元素的宽高以及定位信息

rpx： rpx是微信小程序独有的、解决屏幕自适应的尺寸单位

em: 相对长度单位，em 是相对于当前元素的父元素的 font-size 进行计算,如果当前元素未设置则相对于浏览器的默认字体尺寸。

rem: 相对长度单位，CSS3 新增的一个相对单位，rem 是相对于根元素(html)的 font-size 进行计算，rem 不仅可设置字体大小，也可以设置元素宽高属性。

vh: 相对于视窗的高度，视窗高度是100vh

vw: 相对于视窗的宽度，视窗宽度是100vw

百分比：通常认为子元素的百分比完全相对于直接父元素：

19、自适应布局 @media

通过判断当前窗口的大小，来决定使用什么样的布局

<meta name="viewport" content="width=device-width, initial-scale=1" />
@media screen (max-width: 1000px){}  //窗口超过1000px时

注：使用自适应布局，不能使用绝对单位  如 px

JavaScript

1.什么是闭包，有什么特点

函数嵌套函数，内部函数使用外部函数的变量或者参数，使其长期驻扎在内存中，就形成了闭包。

原理：利用了作用域链的特性，在当前执行环境下访问某个变量时，如果不存在就一直向外层寻找，最终寻找到最外层也就是全局作用域，这样就形成了一个链条。

缺点：容易引起内存泄漏

使用场景：
（1）变量私有化
（2）onclick（操作DOM元素是需要相应的索引值）

为什么要叫做特点，就是因为他的每一个点都是优点同时也是缺点
1. 作用域空间不销毁
  - 优点：因为不销毁，变量页不会销毁，增加了变量的生命周期
  - 缺点：因为不销毁，会一直占用内存，多了以后就会导致内存溢出
2. 可以利用闭包访问在一个函数外部访问函数内部的变量
  - 优点：可以在函数外部访问内部数据
  - 缺点：必须要时刻保持引用，导致函数执行栈不被销毁
3. 保护私有变量
  - 优点：可以把一些变量放在函数里面，不会污染全局
  - 缺点：要利用闭包函数才能访问，不是很方便

2.深拷贝和浅拷贝的区别

浅拷贝(deepClone)只能拷贝一层，只能拷贝复杂数据的地址。深拷贝拷贝多层，每一层的数据都会拷贝。

深拷贝的方法：递归

在js中，分为复杂数据类型 和 基础数据类型

复杂类型真实的值，存在于堆中，其赋值的变量只是获取的是一个地址

浅拷贝的方法： 1.使用for in 拷贝每一项

2.Object.assign（“变量”，“要拷贝的变量”）

3.说说你对 this 的理解？

全局的 this → 指向的是 Window

普通函数的 this → 指向 window

箭头函数的 this → 指向上下文

对象中的 this → 指向其本身

事件中的 this → 指向事件对象

4.在js中那些值，会被隐式转换成 false

Undefined、null、布尔值 false、NaN、零、空字符串

5.JSON 的了解

JSON(JavaScript Object Notation) 是一种跨语言轻量级的数据交换格式。

6.var,const,let的区别

var	let	const
存在全局与函数作用域	局部作用域{ }，if语句和 for语句里面的{ }也属于块作用域	局部作用域{ }
变量提升	不会变量提升	不会变量提升
同一作用域下可以重复声明	不可以	不可以
可以声明不赋值	可以声明不赋值	声明必须赋值，一般推荐大写 (赋值基本类型时只能进行一次赋值；赋值引用类型时，内存地址不能修改)
.	.	值类型不可修改；定义的对象，属性可以改变

const一旦声明就必须立即初始化。

const定义一个对象，属性可以改变。 因为对象是引用类型的，P中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。

值类型：bool，String ，Number，undefine

7.class 构造函数

Class在语法上更加贴合面向对象的写法
Class实现继承更加易读、易理解
更易于写java等后端语言的使用
本质还是语法糖，使用prototype

8.es6新增特性

模版字符串

let const

箭头函数

函数可以设置默认值

… 解构

for in

for of

class

9.原型原型链

原型：

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object ，Function 是JS自带的函数对象。
每个对象都有原型（null和undefined除外），你可以把它理解为对象的默认属性和方法。

原型链：

在JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。
这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），
组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

10.网页性能优化

1.减少http请求

2.压缩js和css，使用精灵图

3.将样式表放在页面上方

4.将脚本放在底部

5.将JavaScript和CSS独立成外部文件

6.减少DOM访问

7.不要使用@import 用link

11.promise----->promise.all promise.race

Promise.all

可以将多个Promise实例包装成一个新的Promise实例。

同时，成功和失败的返回值是不同的，

成功的时候返回的是一个结果数组，

而失败的时候则返回最先被reject失败状态的值。

Promse.race

就是赛跑的意思，意思就是说，

Promise.race([p1, p2, p3])里面哪个结果获得的快，

就返回那个结果，不管结果本身是成功状态还是失败状态。

12.数组常用的操作方法

1.push() 向数组的末尾添加一个或多个元素,并返回新的长度。

2.pop() 删除数组末尾的元素,并返回删除的元素

3.shift() 移除首部元素,并返回移除的元素

4.unshift() 向数组首部添加元素,并返回新长度

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

6.find 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

7.foreach方法用于调用数组的每个元素，并将元素传递给回调函数。对于空数组是不会执行回调函数的。

8.map 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

9.fifter

10.every

11.some

13.协商缓存和强缓存

强缓存，判断缓存有没有过期，如果没有，不用发送请求，直接拿到缓存

协商缓存：如果未命中强缓存，则浏览器会发送请求到服务器地址是否失效，如若没有，服务器不会返回资源信息，将从缓存加载更新缓存

相同点：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；

不同点：强缓存不发请求到服务器，协商缓存会发请求到服务器。

14、xss攻击,crsf攻击

XSS跨站脚本攻击:

黑客想尽一切方法将一段脚本内容放到目标网站的目标浏览器上解析执行!!

CSRF攻击：

CSRF（Cross-site request forgery）跨站请求伪造

攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

15、解决跨域的方法

通过jsonp解决跨域
通过修改document.domain来跨子域
使用window.name来进行跨域
使用HTML5中新引进的window.postMessage方法来跨域

16.描述一下对"异步"和"同步"的理解

异步：不按顺序执行，同一时刻只能执行一个事件

同步：按顺序执行，同一时刻只能执行一个事件

17.call、apply、bind区别

都是用来定义上下文的

.	call	apply	bind
.	指定上下文并执行函数	指定上下文并执行函数	终身定死上下文但是不执行函数，并返回新的函数
传入参数的形式	单独罗列，逗号隔开参数	数组
.	函数.call(上下文对象，参数，参数，参数);	函数.apply(上下文对象，[参数，参数，参数]);

var obj = {
    a: 10
}
function fun(b, c){
    console.log(this.a + b + c); // 17 17 17
}

fun.call(obj, 3, 4);
fun.apply(obj, [3, 4]);
fun = fun.bind(obj); fun(3,4); // 返回新的函数

vue框架面试题

vue基本常见面试题

1.v-if 和 v-show的区别

v-if的特点：条件渲染，完整的销毁和重建，不占空间，一次性的

v-show的特点：display:none属于css切换，频繁切换

2.methods 和 watch 和 computed的区别

methods：

页面数据每次重新渲染都会重新执行，性能消耗大，除非不希望有缓存的时候使用。
是一个方法，它可以接受参数，而computed不能。
computed是可以缓存的，methods不会。
computed可以依赖其他computed，甚至是其他组件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即执行

computed：

同步
是计算属性，依赖于一个或多次，其他属性计算值，并且computed的值有缓存，只有当计算值发生改变才会返回内容。一般来说需要依赖别的属性来动态获得值的时候用。
当一个属性受多个属性影响的时候就需要用到computed。
最典型的栗子：购物车商品结算的时候
只是需要动态值，那就用计算属性。
computed 是一个对象时，有get和set两个选项。

watch：

可以用异步
监听到值的变化，就会执行回调。对于监听到值的变化需要做异步操作或开销较大的操作时用。
当一条数据影响多条数据的时候就需要用watch。
栗子：搜索数据
需要知道值的改变后执行业务逻辑，才用 watch。
初始化时，先创建 computed 再创建 watch 。数据改变时，先执行 computed 再执行 watch

77 Vue中watch、methods 和计算属性的区别是什么？

1、computed和methods

共同点：computed能现实的methods也能实现；

不同点：computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。而只要它的相关依赖没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。也就是说当我们不希望有缓存，用方法来替代。

2、watch和computed

共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。、；

不同点：watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。

3.脚手架版本

（1）vue-cli命令

区别	vue-cli2	vue-cli3/cli4
下载安装	npm install vue-cli -g	npm install -g vue@cli
创建新项目	vue init webpack 2.0project	vue create 3.0project/vue ui
启动项目	npm run dev	npm run serve
（2）项目结构

vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹。同时移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中

（3）设置环境变量

development模式和production模式

4.清除浮动的方法

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

解决方法

父级 div 定义伪类：after 和 zoom (推荐使用，建议定义公共类，以减少 CSS 代码)

   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

在结尾处添加空 div 标签 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>

父级 div 定义 height
父级 div 定义 overflow:auto
父级 div 定义 overflow:hidden
父级 div 也一起浮动
父级 div 定义 display:table
结尾处加 br 标签 clear:both

5.get 和post的区别

.	.	.	.	.
get	获取数据	地址栏传参、可修改	不可收藏	长度max2k
post	修改、增加数据	地址栏不显示	可收藏标签	长度不限

6.五大基本数据类型

也叫做简单数据类型：undefined、null、bolean、number、string；

7.判断一个数组

1.instanceof方法

var arr = [];
arr instanceof Array;

2.Object.prototype.toString.call()，返回的是字符串

var isType = function(obj) {
	return Object.prototype.toString.call(obj).slice(8,-1);
}

3.ES5新增方法isArray( ) 推荐

var a = new Array();
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

4.constructor

let a = [1,2,3];
a.constructor  ===  Array;//true

8.说一下mounted这个钩子函数

通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

为了隔离某些变化；定义在父类中；在需要执行特定操作时调用

9.了解过E-charts吗

js的图表库，用于大数据可视化分析

10.nexttrick

this.$nextTick

获取视图更新之后的DOM节点

在下次 DOM更新结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

11.keep-alive 和结合那两个钩子

在开发中，部分组件没有必要多次初始化，就需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存。

//被keep-alive包含的组件会被缓存,
<keep-alive>
    <component />
</keep-alive>

被keep-alive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数。但有时候希望缓存的组件再次进行渲染，这时Vue为我们解决了这个问题。
被包含在 keep-alive中创建的组件，会多出两个生命周期的钩子: activated（包含的组件再次渲染时触发）与 deactivated（组件销毁时）

12.原型链

原型：

原型链：

13.双向绑定原理

vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()劫持各个属性的setter、getter，数据发生变化时发送信息给订阅者，触发相应的监听回调。

Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(object1,"property1",{
    value:36,
    writable:false
});

第一个参数object1：要操作的对象
第二个参数"property1"：object1里的属性
第三个参数：要定义或修改的属性描述符

描述符：

描述符有两种主要形式：数据描述符和存取描述符。

数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。

存取描述符是由 getter 函数和 setter 函数所描述的属性。(get(){}访问时调用 set(){}修改时调用)

一个描述符只能是这两者其中之一；不能同时是两者。

默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

vue

1.vue优点？

答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；

双向数据绑定：保留了angular的特点，在数据操作方面更为简单；

组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

2.vue父组件向子组件传递数据？

答：通过props

3.子组件像父组件传递事件？

答：$emit方法

4.v-show和v-if指令的共同点和不同点？

答: 共同点：都能控制元素的显示和隐藏；

不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

5.如何让CSS只在当前组件中起作用？

答：在组件中的style前面加上scoped

6.的作用是什么?

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

7.如何获取dom?

答：ref=“domName” 用法：this.$refs.domName

8.说出几种vue当中的指令和它的用法？

答：v-model双向数据绑定；

v-for循环；

v-if v-show 显示与隐藏；

v-on事件；

v-once: 只绑定一次。

9.vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

10.为什么使用key?

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。

作用主要是为了高效的更新虚拟DOM。

11.axios及安装?

答：请求后台资源的模块。npm install axios --save装好，

js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

12.v-modal的使用。

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

v-bind绑定一个value属性；

v-on指令给当前元素绑定input事件。

13.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。

15.v-on可以监听多个方法吗？

答：可以，栗子：

。

16.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，

你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

17.vue组件中data为什么必须是一个函数？

答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

18.渐进式框架的理解

答：主张最少；可以根据不同的需求选择不同的层级；

19.Vue中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

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

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

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

单页面的优点：

用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：

不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

21.v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

22.assets和static的区别

答：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点：

assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。

static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

23.vue常用的修饰符

答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture：与事件冒泡的方向相反，事件捕获由外到内；

.self：只会触发自己范围内的事件，不包含子元素；

.once：只会触发一次。

24.vue的两个核心点

答：数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

25.vue和jQuery的区别

答：jQuery是使用选择器（ $）选取 D OM 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 H TM L 的区别只在于可以更方便的选取和操作 D OM 对象，而数据和界面是在一起的。比如需要获取 l ab e l 标签的内容：$ (“lable”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

26.引进组件的步骤

答: 在template中引入组件；

在script的第一行用import引入路径；

用component中写上组件名称。

Vue中引入组件的步骤?
1.采用ES6的import … from …语法

或
CommonJS的require()方法引入组件

2.对组件进行注册,代码如下

A custom component!

’})

3.使用组件

27.delete和Vue.delete删除数组的区别

答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组改变了数组的键值。

28.SPA首屏加载慢如何解决

答：安装动态懒加载所需插件；使用CDN资源。

29.Vue-router跳转和location.href有什么区别

答：使用location.href='/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(‘/url’)，无刷新页面，静态跳转；

引进router，然后使用router.push(‘/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

30.vue slot

答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

31.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。

32.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

33.Vue2中注册在router-link上事件无效解决方法

答：使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

34.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

答: 方法一：只用a标签，不适用button标签；方法二：使用button标签和Router.navigate方法

35.axios的特点有哪些

答：从浏览器中创建XMLHttpRequests；

node.js创建http请求；

支持Promise API；

拦截请求和响应；

转换请求数据和响应数据；

取消请求；

自动换成json。

axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送

params一般适用于get请求，data一般适用于post put 请求。

36.请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)

 　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
      3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
         4. 封装完毕了，直接调用即可

37.params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $ro u t e . q u ery . nam e 和 t hi s .$ route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新会丢失 params里面的数据。

38.vue初始化页面闪动问题

答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：

在css里加上

[v-cloak] {

display: none;

}。

如果没有彻底解决问题，则在根元素加上style=“display: none;” :style=“{display: ‘block’}”

39.vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

40.vue常用的UI组件库

答：Mint UI，element，VUX

41.vue修改打包后静态资源路径的修改

答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 ‘./’ 。

build: {

…

assetsPublicPath: ‘./’,

…

}

cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）

module.exports = {

publicPath: ‘’, // 相对于 HTML 页面（目录相同） }

42.ajax请求步骤

1.创建异步对象

2.设置请求参数(路径方式)

3.发送请求

4.监听onreadystatechange事件，获取请求状态码和响应码状态
(readyState = 4 && status == 200 response获取响应的数据)

5.获取返回数据

原生的ajax：

// 创建
var xhr = new XMLHttpRequest();  
// 打开(设置请求参数)
xhr.open('POST', 'https://520mg.com/ajax/file.php');
// 发送
xhr.send(form);
// 监听状态变化
xhr.onreadystatechange = function() {if(xhr.readyState==4 && xhr.status===200){
	// 创建一div存文本
	var div=document.createElement('div');
	// 设置div内容=xhr返回的响应文本
	div.innerHTML=xhr.responseText;
	// body追加div
	document.body.appendChild(div);
} }

42.axios与ajax的区别及优缺点

区别：axios是一个基于promise的http库，ajax是对原生XHR的封装；
axios实现对ajax封装，ajax实现局部数据的刷新；

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios

优缺点：

ajax：
1、本身是针对MVC编程，不符合前端MVVM的浪潮
2、基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理（采取个性化打包方案又不能享受cdn服务）
3、ajax不支持浏览器的back按钮
4、安全问题ajax暴露了与服务器交互的细节
5、对搜索引擎的支持比较弱
6、破坏程序的异常机制
7、不容易调试

axios：
1、从node.js创建http请求
2、支持Promise API
3、客户端防止CSRF（网站恶意利用）
4、提供了一些并发请求的接口

43.如何给vue自定义组件添加点击事件？

需要在@click后面加上.native,官方对于native的解释为：.native -——监听组件根元素的原生事件

正确写法：<my-button @click.native=“alert1()” names=“删除” v-bind:item2=“btdata”>

44.vue-cli 工程中常用的 npm 命令有哪些？

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

45.Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。

46.Vue 如何优化首屏加载速度？

异步路由加载

不打包库文件

关闭 sourcemap

开启 gzip 压缩

47.指令v-el的作用是什么?

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,

48.在Vue中使用插件的步骤

采用ES6的import … from …语法

使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象

Vue.use(MyPlugin, { someOption: true })

49、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性，例如：lang=”scss”

有哪几大特性:

1、可以用变量，例如（$变量名称=值）；

2、可以用混合器，例如:

定义了字体的混合器

@mixin font-dpr($font-size){
$f o n t :$ font-size/2;
font-size: $font;
[data-dpr=“2”] & { font-size: $font+2px;}
[data-dpr=“3”] & { font-size: $font+4px;}
}

使用方法如下
.div{

@include font-dpr(24px);

}

3、可以嵌套

50，mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：基于vue的前端组件库。

npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。

组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper

51.v-model是什么？怎么使用？ vue中标签怎么绑定事件？

答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog() />

52，axios是什么？怎么使用？描述使用它实现登录功能的流程？

答：请求后台资源的模块。

npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

53.axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？

答：跨域，添加用户操作，更新操作。

54.请说下封装 vue 组件的过程？

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

55.hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

56.Vue中事件绑定的原理

Vue 的事件绑定分为两种一种是原生的事件绑定，还有一种是组件的事件绑定, 理解:
1.原生 dom 事件的绑定,采用的是 addEventListener 实现

2.组件绑定事件采用的是 $on 方法

56。Vue父子组件生命周期调用顺序

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount>子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

理解:

组件的调用顺序都是先父后子,渲染完成的顺序肯定是先子后父

组件的销毁操作是先父后子，销毁完成的顺序是先子后父

57.vue创建组件的时候data中为什么会被return出一个对象？

可以保证组件的每一次调用都是创建一个新对象，组件之间不会产生影响；

58.vue中有哪些内置组件：

component slot transtion fliters

59。什么是路由懒加载：

路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度

60.ssr是什么

服务端渲染

61.哪个生命周期 hook 最适合从 API 调用中获取数据？

尽管这取决于组件的用途及，但是创建的生命周期 hook 内通常非常适合放置 API 调用。这时可以使用组件的数据和响应性功能，但是该组件尚未渲染。

62… 什么时候调用 “updated” 生命周期 hook ？

在更新响应性数据并重新渲染虚拟 DOM 之后，将调用更新的 hook。它可以用于执行与 DOM 相关的操作，但是（默认情况下）不能保证子组件会被渲染，尽管也可以通过在更新函数中使用 this.$nextTick 来确保。

63.在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时，为什么不使用箭头函数？

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

64.什么时候使用keep-alive元素？

例如在创建时从 API 调用中引入数据的组件。你可能不希望每次动态切换这个组件进行渲染时都调用此 API。这时你可以将组件包含在 keep-alive 元素中。keep-alive 元素缓存该组件并从那里获取它，而不是每次都重新渲染它。

65.什么是异步组件？

当大型程序使用大量组件时，从服务器上同时加载所有组件可能是没有意义的。在这种情况下，Vue 允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时，Vue 接受提供 Promise 的工厂函数。然后可以在调用该组件时对其进行“解析”。

通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。

66.绑定 class 的数组用法

对象方法 v-bind:class=“{‘orange’: isRipe, ‘green’: isNotRipe}”

数组方法v-bind:class=“[class1, class2]”

行内 v-bind:style=“{color: color, fontSize: fontSize+‘px’ }”

69.、js数组主要有哪些方法？主要参数你了解吗？

具体你可以查一下，常用的一般有如下：

1 、shift():删除数组的第一个元素,返回删除的值。这里是0

2 、unshift(3,4):把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2

3、pop():删除数组的最后一个元素，返回删除的值。这里是2.

4、push(3):将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3

5、concat(3,4):把两个数组拼接起来。

6、splice(start,deleteCount,val1,val2,…)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,…

7、reverse：将数组反序
var a = [1,2,3,4,5]; var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]

8、sort(orderfunction)：按指定的参数对数组进行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]

9、slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5]; var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]

70.js迭代的方法

every() 、fliter()、forEach()、map()、some()

71.谈谈对vue 组件化的理解。

组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。可以增加代码的复用性、可维护性和可测试性。提高开发效率，方便重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，是高内聚、低耦合代码的实践。

72，谈谈对Vue 路由的理解。

根据不同的url展示不同的页面或者数据。

分类：路由分为前端路由和后端路由。

前端路由：主要用于单页面的开发，根据用户请求的地址来渲染不同的页面。前端路由不会经过后端，而是根据hash值的变化进行页面数据的渲染，所以不会刷新，不跳转。

原理：通过hashRouter（onhashchange）或者history路由（h5 historyAPI）进行页面的切换。

后端路由：根据用户请求的路径返回不同的页面或数据。

73，created 和 mounted 的区别

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

74，created 和 mounted 分别什么时候用？

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，

属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，

当 mounted 被调用时 vm.$el 也在文档内。

75，vue 和 angular 分别采用什么技术实现双向数据绑定？

76.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。

当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify(),Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

78.vue中怎么重置data

第一种，手动去给表单双向绑定的对象赋值为空

this.$options.data()调用它我们可以获取到页面data在刚初始化时的状态那么这样我们就可以将data中的某个数据重置到初始状态

如果我想把整个data都重置到初始化状态呢？

Object.assign(this. $d a t a, t hi s .$ options.data())

那就用这个方法

this.$data 获取的是当前的data对象

Object.assign则可以将一个对象赋值给另一个对象

两个参数，可以将参数2 赋值给参数1

79.Vue组件中写 name 选项有什么作用？

当项目使用keep-alive时，可搭配组件name进行缓存过滤

DOM递归迭代时需要调用自身name

当你用vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

80.vuex 的 store 特性是什么

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

state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

81.Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

Vuex中修改state的唯一渠道就是执行 commit(‘xx’, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing标志变量为true，然后才能修改state，修改完毕还需要还原_committing变量。外部修改虽然能够直接修改state，但是并没有修改_committing标志位，所以只要watch一下state，state change时判断是否_committing值为true，即可判断修改的合法性。

82.不用 vuex 会带来什么问题

可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

83.Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

对象语法：

data: { isActive: true, hasError: false }

数组语法：

data: { activeClass: 'active', errorClass: 'text-danger' }

Style 也可以通过对象语法和数组语法进行动态绑定

对象语法：

data: { activeColor: 'red', fontSize: 30 }

数组语法：

data: { styleColor: { color: 'red' }, styleSize:{ fontSize:'23px' } }

生命周期函数面试题

1.什么是 vue 生命周期？有什么作用？

答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted 中进行。

2.第一次页面加载会触发哪几个钩子？

答：beforeCreate， created， beforeMount， mounted

3.简述每个周期具体适合哪些场景

答：beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed：这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

4.created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可.

比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

6.请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素 $e l 和 * * 数据对象 * * d a t a 都为 u n d e f in e d ，还未初始化。在 cre a t e d 阶段， vu e 实例的数据对象 d a t a 有了，$ el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

vue路由面试题

1.mvvm 框架是什么？

答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

2.vue-router 是什么?它有哪些组件

答：vue用来写路由一个插件。router-link、router-view

3.active-class 是哪个组件的属性？嵌套路由怎么定义？children

答：vue-router模块的router-link组件。children数组来定义子路由

4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

答：在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id。

5.vue-router 有哪几种导航钩子?

答：三种，

第一种：是全局导航钩子：

router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子

第三种：单独路由独享组件

6.$route 和 $router 的区别

答： $ro u t er 是 V u e R o u t er 的实例，在 scr i pt 标签中想要导航到不同的 U R L, 使用$ router.push方法。返回上一个历史history用$router.to(-1)

$route为当前router跳转对象。里面可以获取当前路由的

name,path,query,parmas等。

7.vue-router的两种模式

答:hash模式：即地址栏 URL 中的 # 符号；

history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

8.vue-router实现路由懒加载（动态加载路由）

答:三种方式

第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

第二种：路由懒加载(使用import)。

第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

9。vue的路由使用步骤？

1.下载vue-router路由模块；

2.创建路由对象；

3.配置路由规则；

4.将路由对象注册为vue实例对象的成员属性；

vuex常见面试题

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

答：vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store.js，…… export 。

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

2.vuex有哪几种属性？

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

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

3.vuex的State特性是？

stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（若是store中的数据发生改变，依赖这个数据的组件也会发生更新）

4.vuex的Getter特性是？

getter用来获取数据，mapgetter经常在计算属性中被使用

5.vuex的Mutation特性是？

mutation修改store的状态。

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作

6.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

面试问题汇总

1.如何让div块变得可编辑

您可以contenteditable使用值true（即contentEditable=“true”）设置HTML5属性，以使元素在HTML中可编辑，

2.e6新增的东西

模版字符串``

let const

箭头函数()=>{}

函数可以设置默认值

… 解构

for in

for of

class

数组高阶方法 filter、map、reduce、includes、forEach、findIndex、sort、some、every

3.es6数组的常用方法，以及参数

改变原数组

1.push（你要添加的数据）

添加的数据是放在数组的最后一个

返回值：添加过后的数组的长度

2.pop（）

删除数组中的最后一个

返回值：被删除的那一个数据

3.unshift（你要添加的数据）

添加在数组的最前面

返回值：数组的长度

4.shift（）

删除数组中第一个数据

返回值：被删除的数据

5.concat（数组1，数组2）

将两个或多个数组拼接到一起，

返回值：返回新的数组

6.slice（起始位置，结束位置）（不包含结束位置）

截取数组中的元素

返回值：返回截取后的数组

7.indexof（“你要查询的变量”）

查询数组中是否包含此元素，

返回值：包含返回下标，不包含返回-1

8.reverse()

将数组反序

返回值：返回反序后的数组

4.判断是否为数组

Array.isArray（数组名）

返回值： true 是数组

false 不是数组

5.防抖和节流的实现方法

function top(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    console.log('滚动条：'+scrollTop)
}


防抖：
防抖就是对于短时间内连续触发的事件在给定时间内只执行一次的函数。
function debounce(func, wait) {
    let timer;
    return function() {
      let context = this; // 注意 this 指向
      let args = arguments; // arguments中存着e
         
      if (timer) clearTimeout(timer);
 
      timer = setTimeout(() => {
        func.apply(this, args)
      }, wait)
    }
}

// 使用
window.onscroll = debounce(top, 1000)

应用场景：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次


节流
节流就是对于短时间内连续触发的事件以给定时间周期性执行的函数。
function throttle1(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

window.onscroll = debounce(top, 1000)

鼠标不断点击触发，mousedown(单位时间内只触发一次)
应用场景：监听滚动事件，比如是否滑到底部自动加载更多

6.用户上传多个图像，如何拿到图像信息

1.通过原生的方法，使用input type=“file” 绑定onchange事件，当input发生改变，获取改变信息中的files，通过遍历展示files中的图片信息

2.使用vant组件中的 Uploader ，用户上传后，调用方法中的  afterRead ,
  获取file，拿到图片信息，遍历展示

7.如何使用css绘制三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

8.box-shadow的参数含义

box-shadow:

h-shadow（水平阴影） 必须
v-shadow（垂直阴影） 必须
blur(模糊距离)
spread（阴影尺寸）
color（阴影颜色）
inset/outset（内外阴影）

9.vue实现多个组件注册

第一步：

创建index.js//在compotents/bse/index.js

// components/base/index
const components = require.context('./', false, /\.vue$/) // require.context获取指定目录下符合条件的文件，这里获取所有base目录下的组件
components.keys().map(item =&gt; {
  Vue.components
})
export default Vue =&gt; {
  components.keys().map(item =&gt; {
    Vue.components(item, components(item).default)
  })
}

在全局中注册

import components from '@/src/components/base'

Vue.use(components)