前端面试题整理-ing---kalrry

前言

Win配置记录
Mac配置记录

在Gitee/github上可以架设自己的网站

一、Html/Css面试题

1. img中的alt和title的区别

​ alt: 图片未加载时候的提示文字，title是鼠标划过提示文字

2. rem/em/vw的区别

​ 设置rem的的单位元素，大小都参考根元素(html)的字体大小

​ em的字体大小参考的该元素本身的字体大小

​ 1vw是指当前视口宽度的1%

3. BFC 是什么

​ BFC称为块级格式化上下文，是页面中独立渲染的区域

​ 触发条件：

​ (1)根元素(html)

​ (2)float属性不为none

​ (3)position为absolute或fixed

​ (4)display为inline-block, table-cell, table-caption, flex, inline-flex

​ (5)overflow不为visible

​ 特性：

​ (1)、BFC的区域不会与float box重叠。
​ (2)、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
​ (3)、计算BFC的高度时，浮动元素也参与计算

4. @media all (min-width:640px) and (max-width:1024px){ body{min-height:768px} }的含义

​ 媒体查询，当前分辨率在640-1024之间， body的最小高度为768

5. 你做的页面在哪些浏览器测试过，内核是啥

1. 谷歌：webkit(新版后变成了 blink) 2. 火狐 ：Gecko 3. ie：Trident 4. 欧鹏 新版本后是blink

6. 网站文件和资源优化的方法

1. 结构和样式分离 2. 优化重复代码

7. content值里面的意思

​ width = device-width：视口宽度和设备宽度设置为一致
​ initial-scale： 初始的缩放比例（默认设置为1.0）
​ minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
​ maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
​ user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

8. css实现元素水平垂直居中

元素{posiiton:absolute;left:50%;top:50%;margin-left:-当前盒子的宽度的一半;marign-top:-当前元素高度的一半}
元素{posiiton:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
元素{posiiton:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
父元素{display:flex;justifiy-content:center;align-items:center}

9.盒子阴影和文本阴影

​ 盒子阴影 box-shadow:水平偏移 垂直偏移 模糊程度 阴影颜色;

​ 文本阴影 text-shadow:水平偏移 垂直偏移 模糊程度 阴影颜色;

10. 浮动的应用及清除浮动

​ 块级元素需要横向排列需要用到浮动

​ 清除浮动的方法 ① 父元素overflow:hidden②浮动元素后添加div且设置clear:both；③父元素::after{content:"";clear:both;display:block;}

11. src和href的区别

​ src是图片引入路径对应的属性，href是a标签的跳转路径，或者是link的引入css外部样式表对应的属性

12. css选择器的种类

​ id选择器 class选择器 后代选择器 群组选择器 伪类选择器 标签选择器等

13.margin的重叠

​ 给上面的盒子添加下边距，给下面的盒子添加了上边距，边距会产生重叠，以最大值显示,左右会相加

14.display:none与visibility:hidden的区别是什么

​ 两个都是隐藏元素，前者隐藏之后不占位
是不能更改@import引入的样式

15. !Doctype 的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

16. css继承的属性有哪些

​ 文本字体类：letter-spacing、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform text-indent text-align

​ 列表类： list-style、list-style-type、list-style-position、list-style-image

17. b标签和strong标签,i标签和em标签的区别？

​ 都可以加粗，strong表强调，都可以倾斜，em表强调

18. 请写出至少你知道的HTML5标签

​ article audio canvas figcaption figure footer header hgroup mark nav section time video

19.语义化的理解

​ 1.html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

​ 2.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

​ 3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

​ 4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

20. Html和xhtml有什么区别

​ XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素

21. 移动端布局的常用方法

1. 百分比布局 2.响应式布局 3.rem+vw布局 4.flex布局 5.混合布局

22. 内联块元素之间形成的空白间隙的原因及解决方法

1. 代码之间的回车所导致 解决 1. 浮动 2. 设置父元素的字体大小为0 3. 代码写同一行

23. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

​ 标准盒模型 box-sizing:content-box;
​ 盒模型的总宽=width+padding左右+border的左右+margin左右
​ 怪异盒模型(ie盒模型) box-sizing:border-box/ie5以下如果缺失文档声明也会触发怪异盒模型
​ 盒模型的总宽=width+margin的左右

24. 渐进增强和优雅降级之间的不同吗?

​ 渐进增强针对低版本浏览器进行构建页面，保证最基本的 功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

​ 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

25. 网页制作会用到的图片格式有哪些

​ gif 支持动画，只有全透明和不透明两种模式，只有 256 种颜色

​ jpg 采用有损压缩算法，体积较小，不支持透明，不支持动画

​ png 采用有损压缩算法，体积也相对较小，支持透明背景，不支持动画

​ s

vg 一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰

​ BMP 无损压缩格式，画质最好，文件太大，不利于网络传输

26. rgba()和 opacity 的透明效果有什么不同

​ rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内 的所有内容的透明度， 而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透 明效果！）

27. 为什么要初始化样式？(重置样式表)

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同 浏览器之间的显示差异 但是初始化 CSS 会对搜索引擎优化造成小影响

28. 如何让 chrome 浏览器显示小于 12px 的文字

​ webkit-transform:scale(0.833); 0.833 是缩放比例

29. 网页中如何需要加载大量图片会很慢，应该如何优化

​ (1)图片懒加载，在页面中看不到的底部区域添加一个滚动条事件判断图片位置距离浏览器顶端的距离与页面的距离，如果前者小于后者,优先加载

​ (2)·如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

​ (3)·如果图片为css 图片，可以使用CSSsprite(精灵图)，SVGsprite(精灵图)，lconfont(字体图标)(精灵图，小图标…)

​ (4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

​ （5）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

30. 弹性盒的布局属性有哪些

​ 父元素：

​ diaplay:flex 形成弹性盒

​ 主轴方向 flex-direction: row 主轴从左向右默认值/row-revese 主轴从右向左 /column 主轴从上到下 /column-reverse 主轴从下到上

​ 主轴方向排列方式 justify-content:flex-start 主轴起点默认值 /flex-end 主轴终点 /center 居中 /space-between 两端对齐/space-around 中间的留白是两边的 2 倍 /space-evenly 平均分配留白

​ 交叉轴排列方式 align-items :stretch 拉伸默认值去掉子元素的高度 /宽度/flex-start 交叉轴的起点 / flex-end 交叉轴的终点/center 居中

​ 换行 flex-wrap:nowrap 不换行,默认值，会将子元素压缩 /wrap 换行/ wrap-reverse 反向换行

​ 多行之间的排列方式 align-content :stretch 拉伸默认值需要去掉子元素的高/flex-start 主轴起点依次排列/flex-end 主轴终点依次排列 /center 居中 /space-between 两端对齐 /space-around 中间的两端的 2 倍 /space-evenly 平均分配

子元素：

​ 重写子项对应的交叉轴的对齐方式 align-self :stretch 拉伸默认值去掉子元素的高度/flex-start 交叉轴的起点 /flex-end 交叉轴的终点 /center 居中 /

​ 放大 flex-grow:0 不放大 / 数值 填充剩余的空间

​ 压缩 flex-shrink:1 压缩 /0 不压缩

​ 实现导航的滚动效果

​ a. 子项的宽度超出了父容器的宽度

​ b. 设置子项不压缩 flex-shrink:0;

​ c. 父元素设置溢出显示滚动条 overflow-x:auto;

​ 子项的宽度 flex-basis:数值+px 类似于宽度

​ 复合写法 flex:子项放大 子项压缩 子项宽

​ 排序 order 数值值越大越向后，可以设置负数

31.常见的兼容性一阶段内容中记几个

1. 在 ie 浏览器中，a 标签套图片，图片周围会自带边框 ie10 及以下

   ​ 1. 解决：去掉边框 img{border:none}

2. 图片自带底部 3px 的留白

   . vertical-align: bottom/middle/top 给图片添加
   2. display:block; 给图片添加
   3. font-size:0; 给父元素添加

3. 表单元素对齐不一致 比如按钮和input 按钮按照怪异盒接卸 text按照标准盒子解析

   1. 设置怪异盒模型
      2. 设置浮动

4. 透明度 opacity 在 ie 浏览器中不支持 0-1

   opacity 的值照常设置，适应正常的浏览器

   单独设置 ie 中透明属性：filter:alpha(opacity=value);取值范围 value:

   1-100(整数)1 完全透明 100 不透明

​ 5. 双倍浮向（双倍边距）（只有IE6出现） 两个块级元素浮动且添加左边距的时候，正常浏览器如果左边距是20px，在ie6会解析程40px

​ 解决：给float的元素添加一个display：inline

32.常见的浏览器内核有哪些

​ ie 浏览器：Trident

​ 火狐：Gecko 代码开源

​ 苹果 & 谷歌旧版本: Webkit

​ 谷歌 & 欧鹏: Blink

33..css 实现边框三角形

​ div {

​ width: 0;height: 0;

​ border: 20px solid transparent; border-top: 20px solid pink;

​ }

34. link和@import引入外部样式表的区别

​ (1)老祖宗的区别link是html提供的方式 @import是css提供的方式，所以只能引入css文件,link还可以引入网页标题旁边的图标
​ (2)加载顺序，@import引入的css,先加载结构，后加载样式，link引入的css,结构和样式同时加载
​ (3)浏览器的支持性，link得到所有的浏览器的支持，@import ie6以上才支持
​ (4)js可以更改通过link引入的样式，但

二、JavaScript面试题

1、引用类型和基本类型的区别

基本类型有：Undefined、Null、Boolean、Number、String、Symbol

引用类型有：统称为 Object 类型。

1）、内存的角度：

基本类型在内存中，占据一块空间，空间里存储的就是数据，获取数据是直接获取

引用类型在内存中，占据两块空间，第一块存储的是地址，第二块存储的是数据，获取数据是属间接取值

2）、赋值的角度

基本类型赋的就是值，引用类型赋的就是地址

3）、函数传参

基本类型传的是值，引用类型传的是地址

2、null和undefined区别

undefined:定义变量后，没有赋值

null:对象没有引用的值，即就是引用类型里没有存储地址

3、Let ，const、var的区别

相同点：都是用来定义变量的

不同点：

1）、声明提升：var会声明提升，let和const不会

2）、作用域：var是全局作用域和函数作用域，let和const是块级作用域（包括全局和函数作用域）

var定义的全局变量是window对象的属性，let和const定义的全局变量不是window的属性

3）、多个同名的变量：var可以，let和const不行

4）、暂时性死区：var没有，let和const有

5）、let在循环里，可以暂存循环便变量

6）、const定义的变量是常量，必须赋初始值而且不可修改

4、this的指向，箭头函数的this

this是函数的内置对象，this是代名词，所以，this代表哪个对象，要看函数属于哪种情况。

this的指向有四种情况：

①当this所在函数是事件处理函数时，this代表事件源

②当this所在函数是构造函数时，this代表new出来的对象

③当this所在函数时类的方法时，this代表调用方法的对象。

④当this所在函数没有明确的所属对象，this代表window对象。

另外：箭头函数根本没有自己的this，它内部的this就是外层代码块的this

5、call, apply,bind的区别

相同点：三个函数都会改变this的指向（调用这三个函数的函数内部的this）

不同点：

1)、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）

2)、call和apply不会产生新的函数，只是在调用时，绑定一下而已。

3)、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。

6、普通函数和箭头函数的区别

1.写法格式不同

2.箭头函数不能作为构造函数使用

3.箭头函数中没有this和arguments

4.箭头函数不具有prototype原型对象

5.箭头函数不具有super

7、原型、原型链、继承

原型：

​ 每一个构造函数都有一个 prototype 属性，这个属性会在生成实例的时候， 成为实例对象的原型对象。javascript 的每个对象都继承另一个对象，后者称为“原 型”（prototype）对象。

原型链：

​ 每一个对象都有一个 proto 属性，对象的属性和方法，有可能定义在自 身，也有可能定义在它的原型对象。由于原型本身也是对象，又有自己的原型，所 以形成了一条原型链（prototype chain）。（“原型链” 的作用是：读取对象的某个属 性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如 果还是找不到，就到原型的原型去找。如果直到最顶层的 Object.prototype 还是找 不到，则返回 undefined。举例来说，如果让某个函数的 prototype 属性指向一个数 组，就意味着该函数可以当作数组的构造函数，因为它生成的实例对象都可以通过 prototype 属性调用数组方法。）

继承：

​ 继承就是在子类构造函数中继承父类构造函数的私有属性和原型属性。我们 在子类构造函数中使用 call 或 apply 方法调用父类构造函数并改变其 this 指向为 子类构造函数的 this，此时子类的构造函数就继承了父类的私有属性和私有方法。 将父类的实例化对象赋值给子类的原型对象，此时子类就继承了父类的原型属性和 原型方法。

8、作用域和作用域链

作用域，就是变量起作用的区域（范围）。或者说，js代码执行时，查找变量的范围。

作用域链是指：

​ 当js编译器在寻找变量时，先在最近的作用域（花括号）里找，如果找不到，则朝上一级作用域（花括号）里找，依次类推，直到找到或者找不到为止。这就是作用域链。

9、ajax的封装

function ajax(obj){

    let defaultObj = {
        method:"get",
        url:"#",
        params:"",
        callback:null,
        isAsync:true
    }

    for(let key in defaultObj){
        // 把obj里没有传入的属性使用defaultObj的对应属性。
        if(obj[key]==undefined){
            obj[key]=defaultObj[key];
        }
    }

    // 1、创建XMLHttpRequest对象
    let xhr = new XMLHttpRequest();

    // 2、设置请求相关信息
    let urlAndParams = obj.url;
    if(obj.method.toLowerCase()=="get"){
        urlAndParams += "?"+obj.params
    }

    xhr.open(obj.method,urlAndParams,obj.isAsync);

    // 3、设置回调函数（后端响应时，调用的函数）
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){            
            obj.callback && obj.callback(xhr.responseText);
        }
    }

    if(obj.method.toLowerCase()=="get"){
        // 4、发送请求
        xhr.send();
    }else if(obj.method.toLowerCase()=="post"){
        // 如果是post方式，必须设置请求头。
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(obj.params);
    }
}

10、深浅拷贝

function copyObj(obj){
    let newObj ={};
    for(let key in obj){        
        if(typeof obj[key] == "object"){ //如果说当前属性是对象的话，那么再做深拷贝
            newObj[key] = copyObj(obj[key]);
        }else{
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

11、promise都有哪几种状态 其执行状态

概述：

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息

作用：

（1）、避免回调地狱的问题

（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易

Promise有三种状态：

​ pendding ：正在进行中，

​ rejected ：失败，

​ resolved ： 成功

Promise 常用的三种方法

​ 第一种：then 表示异步成功执行后的数据状态变为 resolve

​ 第二种：catch 表示异步失败后执行的数据状态变为 reject

​ 第三种：all 表示把多个没有关系的 Promise 封装成一个 Promise 对象使用 then 返回一个数组数据。

12、数组去重的方法

13、数组的方法

push 尾增

pop 尾删

unshift 头增

shift 头删

concat 数组拼接

join 数组转字符串

reverse 逆序

sort 按字符串UniCode码排序

map 对数组的每个元素做某个处理,参数是回调函数，并且有返回值

slice 复制

indexOf 查找数组中的元素，找到返回该元素下标, 没找到返回-1

splice 截取

filter 过滤

every 对数组中的每一项进行判断，若都符合则返回true，否则返回false

some 对数组中的每一项进行判断，若都不符合则返回false，否则返回true

reduce:将数组所有数值进行叠加返回

forEach 对数组的每个元素做某个处理,参数是回调函数

14、闭包

概念：定义在一个函数内部的函数，并且这个内部函数能够访问到外层函数中定义的变量

作用：

①让外部访问函数内部变量成为可能

②局部变量会常驻在内存中

③可以避免使用全局便变量，防止全局变量污染

缺点：

会造成内存泄露（内存空间长期被占用，而不被释放）

15、事件委托是什么？如何确定事件源

事件委托还有一个名字叫事件代理，JS 高程上讲：事件委托就是利用事件冒泡，只 制定一个时间处理程序，就可以管理某一类型的所有事件。

将子元素的事情委托给它们的祖先级元素来干，然后使用 event.target(低版本 IE 用 的是 event.srcElement)来代替已经混乱 this 关键字

• 解决动态元素(刚进入页面时，元素不在页面内)无法绑定事件问题
• 在极端情况下可以提升客户端性能

16、cookis、sessionStorage、localStorage的区别

数据的生命

​ cookie：一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效

​ localStorage：除非被清除，否则永久 保存

​ sessionStorage：仅在当前会话下有效， 关闭页面或浏览器后被 清除

存放数据大小

​ cookie：4K左右

​ localStorage、sessionStorage：一般为5MB

与服务器端通信

​ cookie：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题

​ localStorage。sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

​ 易用性

​ cookie：需要程序员自己封装，源生的 Cookie 接口不友好

​ localStorage。sessionStorage：源生接口可以接受，亦可再次封装来对 Object 和 Array 有更 好的支持

17、ES6新特性

• const 和 let

• 模板字符串

• 箭头函数

• 函数的参数默认值

• 对象和数组解构

• for…of 和 for…in

• ES6 中的类

18、普通函数和构造函数的区别

返回值类型的区别：

• 构造函数是没有返回值类型的
• 普通函数是有返回值类型的，即使函数没有返回值，返回值类型也要写上 void。

函数名的区别：

• 构造函数的函数名必须要与类名一致，习惯首字母大写
• 普通函数的函数名只要符合标识符的命名规则即可。

调用方式的区别：

• 构造函数是在创建对象的时候由 new 关键字调用的
• 普通函数是由我们使用对象调用的，一个对象可以调用多次普通函数

作用上的区别：

• 构造函数用于初始化一个对象。
• 普通函数是用于描述一类事物的公共行为

19、为什么会造成跨域/请简述同源策略

造成跨域的原因：

• 因为浏览器的同源政策，协议、端口和域名有任意一个不同就会造成跨域。比如说 发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议 或者不同的域名。

同源策略：

• 同源策略就是浏览器保护浏览器安全的一种机制，它不允许客户端请求从 A 服务器 请求过来的页面往 B 服务器去发送 Ajax 请求。两个页面地址中的协议、域名和端 口号一致，则表示同源。

同源策略的数据：

• 存储在浏览器中的数据，如 localStroage、Cookie 和 IndexedDB 不能通过脚本 跨域访问
• 不能通过脚本操作不同域下的 DOM
• 不能通过 ajax 请求不同域的数据

20、什么是 jsonp，工作原理是什么？他为什么不是真正的 ajax

JSONP：是一种解决跨域限制问题的一种方式

工作原理：前端使用一个 script 标签来创建一个 HTTP 请求，并且事先声明一个回 调函数，该回调函数的名字由 callback 参数的参数值发送给后端。后端接收到来自 前端的请求后利用 callback 参数的参数值和要给前端返回的数据拼接成一段 JS 执 行函数的代码段，此时实参就是要返回给前端的数据。前端接收到后端返回的结果 后，会自动的执行事先声明好的回调函数，此时函数的形参就代表了后端要返回的 数据。

为什么不是真正的 ajax：JSONP（JSON with padding）可用于解决主浏览器的跨域 数据访问的问题，与 JSON 没有关系，只是一种跨域访问的技巧。 ajax 的核心是 通过 xmlHttpRequest 获取非本页内容，jsonp 的核心是动态添加 script 标签调用 服务器提供的 js 脚本；jsonp 只支持 get 请求，ajax 支持 get 和 post 请求。

21、For 循环与 map 循环有什么区别

For 循环：在固定长度或者长度不计算的情况下 for 循环效率更高

Map 循环：在不确定长度或者计算长度有损性能的时候用 map 比较方便，如 果需要操作元素里面的每一个值并且返回一个新数组的话，那么 map 就是最好 的选择, 数组中的元素为原始数组调用函数处理后的值。

22、同步与异步的区别

同步与异步： 同步与异步是对应的，它们是线程之间的关系，两个线程之间要 么是同步的，要么是异步的。

**区别：**同步就是由调用者主动等待这个调用的结果。而异步则是相反，调用在发 出之后，这个调用就直接返回了，所以没有返回结果。同步就是在发出一个调用 时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值 了。当一个异步过程调用发出后，调用者不会立刻得到结果。而是在调用发出 后，被调用者通过状态、通知来通知调用者，或通过回调函数处理这个调用。

23、阻塞与非阻塞区别

**阻塞与非阻塞：**阻塞与非阻塞是对同一个线程来说的，在某个时刻，线程要么处 于阻塞，要么处于非阻塞。

**区别：**阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得 到结果之后才会返回。非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞 当前线程。

24、重绘和回流是什么

解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树，将 DOM 树和 CSSOM 树结合生成渲染树(Render Tree)

Layout(回流):当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变 而需要重新构建的时候，这时候就会发生回流。根据生成的渲染树，进行回流 (Layout)，得到节点的几何信息（位置，大小）

Painting(重绘):在回流的时候，浏览器会使渲染树中受到影响的元素部分失效， 并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部 分元素到屏幕中，这个过程就是重绘。根据渲染树以及回流得到的几何信息，得 到节点的绝对像素

什么时候会发生回流和重绘

• 添加或删除可见的 DOM 元素

• 元素的位置发生变化

• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）

• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。

• 页面一开始渲染的时候（这肯定避免不了）

• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大 小的）

• 回流一定会触发重绘，而重绘不一定会回流

如何减少回流，重绘？

• 修改 html 元素中对应的 class 名，利用 class 替换样式
• csstext（利用 cssText 属性合并所有改变，然后一次性写入）
• display:none（隐藏元素，应用修改，重新显示））

25、字符串的方法

charAt() 根据下标查找字符

concat() 字符串拼接，平时我们会用+运算代替

indexOf() 根据字符查找对应的下标从一个字符串中检索某个字符的下标， 如果没有找到对应的字符，则返回-1；如果要寻找的字符有多个，则默认返 回第一个的下标

lastIndexof() 根据字符查找对应的下标（从后往前找）

replace(“原字符”,“新字符”) 替换字符

​ //惰性匹配用 m 替换 e console.log(str.replace(“e”, “m”));

​ //全局匹配 console.log(str.replace(/c/g, “m”));

slice(start,end) 通过起始下标和终结下标截取一段字符串，结果中包含开始 位但不包含结束位；如果省掉第二个参数则代表一直截取到结束为止

substring() 同 slice 功能和参数都一致，不过第二个参数不允许传负数

split() 根据所传参数的字符作为分隔将原字符切割为长度若干的一个数组

substr() 通过起始下标和截取数量来截取一段字符串

toLowerCase() 转换字符串为小写

toUpperCase() 转换字符串为大写

26、什么是 js 内存泄露？

内存泄漏（Memory Leak）是指程序中已动态分配的堆内存由于某种原因程序未 释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等 严重后果。

避免内存泄漏：

• 避免误建全局变量：在 JS 中使用未定义的变量，会在全局对象中定义一个 新变量。在浏览器中，全局变量是 window
• 注意定时器或回调函数的使用：使用定时器不可避免，但尽量少使用，尽量 在使用完定时器后，使用 clearInterval 或者 clearTimeout。

27、Jquery 选择器有哪些

基础选择器

• id 选择器$(’#brother’).css(‘color’,‘red’);
• 标签选择器：$(‘a’).css({‘color’:‘green’,‘font-size’:‘24px’});
• 类选择器：$(’.li3’).css(‘background’,‘yellow’);
• 通配符选择器:console.log($(’’)); $(’’).html(’’); // 清空整个界面的 dom 元素

层级选择器

• 后代选择器：$(’#box p’).css(‘color’,‘red’);
• 子代选择器：$(’#box>p’).css(‘color’,‘green’);
• 毗邻选择器，匹配所有的紧接着选中元素的兄弟： $(’#father+p’).css(‘font-size’,‘30px’);
• 兄弟选择器 $(’#father~p’).css(‘background’,‘gray’);

过滤选择器

• 获取第一个 $(‘li:first’).css(‘background’,‘gray’);
• 获取最后一个 $(‘li:last’).css(‘background’,‘yellow’);
• 获取奇数 $(‘li:odd’).css(‘color’,‘red’);
• 获取偶数 $(‘li:even’).css(‘color’,‘green’);
• 选中索引值为 1 $(‘li:eq(1)’).css(‘font-size’,‘32px’);
• 大于索引值 1 $(‘li:gt(1)’).css(‘font-size’,‘60px’);
• 小于索引值 1 $(‘li:lt(1)’).css(‘font-size’,‘10px’);

属性选择器

• $(‘li[id]’).css(‘color’,‘red’);

• $(‘li[class=what]’).css(‘font-size’,‘30px’);

• $(‘li[class!=what]’).css(‘font-size’,‘50px’);

• $(‘input[name^=username]’).css(‘background’,‘gray’);

• ${(}^{\prime }input[name$=222]’).css(‘background’,‘green’);

• $(‘button[class*=danger]’).css(‘background’,‘orange’)

• 解释：

  1、标签名【属性名】，查找所有含有 id 属性的该标签名的元素

  2、匹配给定的属性是 what 值【attr=value】匹配给定的属性是某个特定 值的元素

  3、没有 class 也会发生变化，[attr!=value]匹配所有不包含有特定的属 性，或者属性不等于特定值的元素

  4、匹配给定的属性是以某些值开始的元素 ^

  5、匹配给定的属性是以某些值结尾的元素 $

  6、匹配给定的属性是以包含某些值的元素 *

筛选选择器

• $(‘span’).eq(1).css(‘color’,‘red’);

• $(‘span’).first().css(‘font-size’,‘28px’);

• ${(}^{\prime }spa{n}^{\prime }).last().css{(}^{\prime }colo{r}^{\prime }{,}^{\prime }greenyello{w}^{\prime });console.log($(‘span’).parent());

• $(‘span’).parent(’.p1’).css({‘width’:‘300px’,height:‘400px’,‘backgro und’:‘red’});

• $(’.list’).siblings(‘li’).css(‘color’,‘red’);

• $(‘div’).find(‘button’).css(‘background’,‘gray’);

• 解释：

  ​ 1、获取第 n 个元素数值从 0 开始 .eq()

  ​ 2、获取第一个元素 .first()

  ​ 3、获取最后一个元素 .last()

  ​ 4、获取父元素 .parent()

  ​ 5、选择所有的兄弟元素 .siblings（）

  ​ 6、查找所有的后代元素 .find() o jQuery 的筛选器的分类

28、Jquery 插入节点的方法

• before(): 在指定节点的前面添加要添加的节点
• insertBefore(): 把要插入节点插入到指定节点的前面
• after (): 在指定节点的后面添加要添加的节点
• insertAfter (): 把要插入的节点插入到指定节点的后面
• prepend (): 在指定父级里面的最前面添加指定节点
• prependTo (): 把指定节点添加到指定父级里面的最前面
• append (): 在指定父级里面的最后面添加指定节点
• appendTo (): 把指定节点添 加到指定父级里面的最后面

30、Get 和 post 不同

• get 请求参数是在 URL 中存在的，post 请求的参数是在请求主体中的
• post 的安全性要好于 get 请求
• get 请求会造成一次浏览器浏览记录，而 post 请求不会有浏览记录
• get 请求有长度限制，post 没有长度限制

31、map 和 foreach 的区别

相同点：

• 都是循环遍历数组中的每一项 50
• forEach 和 map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item（当前每一项）、index（索引值）、arr（原数组）
• 匿名函数中的 this 都是指向 window
• 只能遍历数组

不同点：

• forEach()没有返回值，map() 有返回值，可以 return 出来
• 不管是 forEach 还是 map 在 IE6-8 下都不兼容（不兼容的情况下在 Array.prototype 上没有这两个方法）

32、请说出三种减少页面加载时间的方式

• 优化图片
• 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
• 优化 CSS（压缩合并 css，如 margin-top,margin-left…) 34
• 网址后加斜杠（如 www.campr.com/目录，会判断这个“目录是什么文件类型，或者 是目录。）
• 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算 大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览 体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾 出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好 了。）
• 减少 http 请求（合并文件，合并图片）。

33、什么是面向对象请简述

• 面向对象就是将问题抽象成若干 object 对象，然后去对这些对象编程，将对象的属 性和操作封装到类中，让它们具有一定的功能。具有抽象性、封装性、继承性、多 态性的特点。类是具有相同或相似性质的对象的抽象。因此，对象的抽象是类，类 的具体化就是对象，也可以说类的实例是对象。
• 面向对象是把构成问题的的事物分解成各个对象，建立对象不是为了完成一个步 骤，而是为了描述某个事物在整个解决问题的过程中的行为。
• 优点：易维护、复用、扩展
• 缺点：性能低：因为在创建类的实例需要很大的开销。

三、Vue面试题

vue面试题

vue基础

Router基础

VueX基础(状态管理)

1、v-show 与 v-if 有什么区别？

相同点：
v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。

不同点：
1、原理：

v-show是通过控制元素的样式属性display的值，来完成显示和隐藏；
v-if是通过对dom元素的添加和删除，完成显示和隐藏

	2、使用场景：由原理（做法）得出使用场景的区别

v-show：使用在dom元素频繁切换的场景
v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。

2、简述 Vue 的单向数据流

首先

单项数据流是发生在父组件朝子组件传值的时候，所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。
也就是说：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。

而且

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。所以，在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。

3、computed 和 watch 的区别和运用的场景？

首先（相同点）：

computed 和 watch都可以实现数据的监听。

其次（区别）：

​ 第一（本质）：
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，当依赖的属性值发生改变时，才会重新计算 computed 的值，它可以设置getter和setter.
watch： 更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.

​ 第二（运用场景）：
computed：当我们需要进行数值计算，并且依赖于其它数据时，使用 computed。
watch：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。

4、谈谈你对 Vue 生命周期的理解？

1）、生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2）、各个生命周期阶段及其钩子函数

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

该阶段前后的两个钩子函数：beforeCreate和created

第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

该阶段前后的两个钩子函数：beforeMount和mounted

第三阶段：组件更新阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲染阶段。

该阶段前后的两个钩子函数：beforeUpdate和updated

第四阶段：组件销毁阶段：组件销毁。

该阶段前后的两个钩子函数：beforeDestroy和destroyed

5、组件中 data 为什么是一个函数？

因为data是引用类型，如果不用函数，所有组件的data会指向同一块内存区域，导致数据之间互相影响。

而使用函数时，每次实例化组件时，调用函数，return一个新(new)的data对象。这样每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。

6、v-model 的原理？

v-model 指令主要用在表单元素上实现数据双向绑定的。
例如：input、textarea、select 等创建双向数据绑定，本质上不过是语法糖，其实v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

7、Vue 实现数据绑定的原理

vue数据绑定是通过 数据劫持和观察者模式 的方式来实现的。

1、数据劫持：使用Object.defineProperty();

，bv./c是：感知属性的变化。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，就可以控制属性值的有效范围，也可以改变其它属性的值等。

2、观察者模式（发布订阅模式）

目的：当属性发生变化时，使用该数据地方（模板，计算属性，watch等等）跟着变化

8、Vue 组件间通信有哪几种方式？

Vue 组件间通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式：

（1）props / $emit ： 父子组件通信

（2）ref： 适用 父子组件通信

（3）EventBus （$emit / $on）： 适用于 父子、隔代、兄弟组件通信

（4）$root：集中管理，适用于所有场景

（5）Vuex 适用于所有场景

9、谈谈你对 keep-alive 的了解？

keep-alive 可以缓存其它组件及其的组件的状态，避免了组件的频繁创建和销毁。

它有三个特性：

1）、用于缓存组件，一般结合路由和动态组件一起使用。

2）、提供 include 和 exclude 属性。两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

3）、对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

10、动态路由传参2种方式params与query

1）、params

​ 传：

​ 声明式：

​ User

​ 编程式：

​ $router.push({ name: ‘user’, params: { id: ‘123’ }})

​ 接：

​ 模板里的写法：

​ $route.params.参数名

​ 脚本里的写法:

​ this.$route.params.参数名

2）、query

​ 传：

​ 带查询参数，变成 /register?plan=private

​ $router.push({ path: ‘/register’, query: { plan: ‘private’ }})

​ 注意：如果提供了 path，那么params 会被忽略

​ 接：

​ 模板里的写法：

​ $route.query.参数名

​ 脚本里的写法：

​ this.$route.query.参数名

11、Vue路由懒加载

• 懒加载简单来说就是延迟加载或按需加载，即在需要的时候进行加载。为给客户 更好的客户体验，首屏组件加载速度更快，解决白屏问题，当构建的项目比较大 的时候，懒加载可以分割代码块，提高页面的初始加载效率。

• 使用

  ​ component

  ​ vue 异步组件懒加载：主要是使用了 Promise.resolve()的异步机制，用 require 代替了 import,实现按需加载： resolve=>(require([“引用的组件路径”],

  ​ ES 中的 import（推荐）：const HelloWorld = （）=>import(’ 需要加载的模块地址’)

12、Vue路由守卫的三种方式，及其钩子函数和参数

1）、全局守卫

​ 全局守卫有前置守卫和后置守卫，是vueRouter对象的两个钩子函数，分别是 beforeEach和afterEach

2）、路由独享守卫

​ 写在路由配置里。钩子函数名：beforeEnter，只有前置守卫

3）、组件内部守卫

​ 写在组件对象里。分别有前置守卫，后置守卫，路由改变守卫（当前组件被复用的情况,不是路径改变）三个钩子函数。

​ 分别是：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

13、为什么v-for与v-if不能连用

应该说，建议不要连用，或者说，在循环时，通过if只能拿到少部分数据时，建议不要使用。

原因： v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下。会浪费性能。而且，每次刷新页面时，都会执行这样性能不高的代码。

14、Vuex 是什么？怎么使用？在那种场景下使用

Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。通过创建一个集中 的数据存储，方便程序中的所有组件进行访问。

• state: {},//存放数据
• mutations: {},//修改数据的值
• actions: {},//执行异步操作请求数据
• modules: {},//让每一个模块拥有自己的 state、mutation、action、getters, 使得 结构非常清晰，方便管理。
• getters:{}//计算属性

15、Vue 中路由跳转方式（声明式/编程式）

• 使用 this.$router 全局路由的 push()方法进行路由跳转–称之为编程式跳转；
• 使用 router-link 进行跳转路由–称之为声明式跳转

16、跨域的解决方式

• 方法 1 ：后端解决跨域 CORS（跨域资源共享）

• 方法 2 ：使用 JQuery 提供的 jsonp

• 方法 3 ：proxyTable 解决跨域

17、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

1）、首先：

SPA的英文是single-page application ，也就是说整个项目中只有一个页面。

单页面应用的实现思路： 就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态操作DOM。

2）、其次：

它的优点有三点：

第一点：**局部刷新。**用户体验好、快，内容的改变不需要重新加载整个页面。

第二点：**服务器的压力小。**基于上面一点，SPA 对服务器的压力小；

第三点：**前后端职责分离。**架构清晰，前端进行交互逻辑，后端负责数据处理；

它的缺点也有三点：

第一点：**初次加载耗时多。**为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

第二点：**前进后退路由管理问题。**由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理（这是vue-router做的）；

第三点：**SEO 难度较大。**由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

18、Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父子组件钩子函数的执行顺序可以归类为4个 部分：

第一部分：首次加载渲染

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

第二部分：父组件修改子组件的props值时：

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

第三部分：父组件修改的数据跟子组件没有关系时，

不会影响子组件 父 beforeUpdate -> 父 updated

第四部分：销毁过程

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

19、你对 Vue 项目进行哪些优化？

第一个方面：代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

第二个方面：Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

第三个方面：基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

20、谈谈你对vueX的理解

1、vueX是干什么的

vuex能够保存全局数据，供整个应用使用，可以在组件之间传递数据。

vuex保存的数据是响应式的

vuex保存的数据可以跟踪状态的变化

2、vueX的核心概念

state : 数据仓库 ，存储所有的 共享数据 ，相当于vue组件里的data getter ： 在state的基础上 派生的数据， 相当于vue组件里 computed mutation：修改state的数据时，用mutation，这与跟踪状态 有关系 action：解决mutation里只能有同步代码的问题，action里可以有异步代码

3、vueX的数据流

组件里 dispatch（派发）vueX中的 action，action里commit（提交）mutation，mutation里修改state。state被修改后，会响应式到组件上。

21、vue-router的两种路由模式的区别

路由模式分为两种：hash和history；通过设置vueRouter对象的mode属性来完成修改。

区别：

1）、外观上

hash模式时，路径上有#。

history模式时，路径上没有#。

2）、原理上

hash模式通过修改location.href来完成

使用锚点连接的思路，使用hash模式不会给后端发请求。当然，在hash值变化时，会同时触发window对象的onhashchange事件，并可以通过事件对象的oldURL属性和newURL属性 得到新旧URL。

22、为何vue采用异步渲染？

1、vue采用异步队列渲染是为了提高性能，在异步队里会去掉重复的无效的渲染。

当vue中的数据发生改变后，vue框架会把该数据引起的dom更新放入异步队列（ 缓冲在同一事件循环中发生的所有数据变更 ），进行排队。 如果同一个 watcher 被多次触发，只会被推入到队列中一次 。 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的 。

2、如果不采用 异步渲染，而是在数据发生改变后，立即更新dom，如果有重复无效的渲染，那么，就会造成性能的浪费。

23、nextTick实现原理？

1）、为什么用Vue.nextTick()

首先，JS是单线程的，那么，它如何处理异步操作。

• 所有同步任务都在主线程上执行，形成一个执行栈。

• 主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件（所以，也叫事件队列），进行排队（处于等待状态）。

• 当执行栈中的所有同步任务执行完后，就会读取任务队列（事件队列）中的任务（事件）。即：任务队列中的任务就结束了等待状态，进入执行栈。

• 主线程不断重复第三步。直到任务队列和执行栈里的代码执行完毕。

其次，vue更新DOM的思路。使用的就是异步更新队列，所以，就使用了事件循环。目的是提高性能，避免无效的重复的DOM更新。即：vue中更新数据后，并不会立即更新DOM，而是把数据引起的DOM更新放入到异步更新队列里。等待下次事件循环（tick），并在两个tick之间进行UI渲染。这样程序员就不能在更改数据后，立即获取更新后的DOM，也不知道什么时候DOM能够更新。基于此，vue提供了nextTick函数。让程序员操作更新后DOM的代码放入到nextTick的回调函数里。由nextTick内部，在更新完DOM后，调用回调函数。

24、Vue 中的 key 有什么作用？

首先

key 是Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

再说一下，diff算法的执行过程：

1）、oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，
2）、在新节点和旧节点进行两两对比时，共有4种比较方式：
a.newStartIndex 和oldStartIndex 、
b.newEndIndex 和 oldEndIndex 、
c.newStartIndex 和 oldEndIndex 、
d.newEndIndex 和 oldStartIndex，
如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较。

25、Vue 如何定义一个过滤器

全局过滤器

• 位置：创建实例之前

• 语法

  ​ Vue.filter(‘过滤器名称’,function(val){//val 表示需要处理的值 return val + 4; //返回处理后的数据 })

局部过滤器

• 只能在当前 vue 注册内容中使用

• 位置：在 vue 实例中与 el 属性 data 属性同级定义 62

• 语法

  ​ filters：{ “过滤器名字”:function(val){ return 输出内容 }}

过滤器的调用方法

• {{msg | 过滤器名称 }}

• 注意事项

  ​ 定义全局过滤器，必须放在 vue 实例化前面

  ​ 在没有冲突的前提下，过滤器可以串联

26、Route 与 router 区别

• $router 是 VueRouter 的一个对象，router 的实例对象，这个对象是一个全局 的对象，他包含了所有的路由包含了许多关键的对象和属性。举例：history 对 象
• $route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是一个局 部的对象，可以获取对应的 name,path,params,query 等

27、vuex 的 State 特性是？

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

28、vuex 的 Getter 特性是？

getters：相当于之前组件中学习的计算属性,getters 属性主要是对于 state 中数 据的一种过滤

29、vuex 的 Mutation 特性是？

mutations:里面装着一些改变数据方法的集合，就是把处理数据逻辑方法全部放 在 mutations 里面，当触发事件的时候想改变 state 数据的时候使用 mutations（在 vuex 中如果想进行数据的修改，必须在 mutations 中进行操 作）

30、vuex 的 actions 特性是

actions：进行异步操作（异步请求）

Ajax、fatch、Axios、form

NodeJs基础

webpack基础

性能优化