一、CSS
01.Flex布局
display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩
容器属性：
1.flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
2.flex-wrap属性
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。
3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
4.justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。space-around为项目之间间距为左右两侧项目到容器间距的2倍；space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
5.align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：center使用最多，自然不会陌生，在纵轴中心位置排列：baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
6.align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似
项目属性：
1.order
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
2.flex-grow
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。
3.flex-shrink
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
4.flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
5.flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
6.align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
02.CSS3新特性
- transition：过渡
- animation：动画
- transform：形状转换
- 选择器
- box-shadow：阴影
- border-radius：边框圆形化处理
- rgba：颜色
- 弹性布局Flex
- audio 音频
- video 视频
- text-shadow
03.img中alt和title的区别
alt属性是在图片不能正常显示时出现的文本提示。
title属性是在鼠标在移动到元素上的文本提示。
04.用纯CSS创建一个三角形
<style>
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
05.CSS的盒子模型
box-sizing:conten-box（标准模型）| border-box（IE模型）
标准盒子模型：宽度=内容的宽度（content）+ border + padding
IE盒子模型：宽度=内容宽度（content+border+padding)
06.div水平居中
a. 已知宽度，block元素 ，添加添加margin:0 auto属性。
b.已知宽度，绝对定位的居中 ，上下左右都为0，margin:auto
07.div水平垂直居中
div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;
}
div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
top: 50%;
left: 50%;
transform：translate（-50%，-50%）
}
div {
display:flex;
justify-content:center;
align-content:center;
}
08.清除浮动
- clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}
- 给浮动元素父级设置高度
- 父级同时浮动（需要给父级同级元素添加浮动）
- 父级设置成inline-block，其margin: 0 auto居中方式失效
- 给父级添加overflow:hidden 清除浮动方法
- 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
float_div:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; } .float_div{ zoom:1 }
09.display:none 和 visibility: hidden的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
10.CSS中 link 和@import 的区别
- link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载（并行），而@import引用的CSS会等到页面被加载完再加载（串行）
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题
- link方式的样式的权重 高于@import的权重.
11.position的absolute与fixed共同点与不同点
共同点： 改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间 默认会覆盖到非定位元素上
不同点： absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
12.transition和animation的区别
主要区别是transition需要触发一个事件才能改变属性， 而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。
transition 规定动画的名字 规定完成过渡效果需要多少秒或毫秒 规定速度效果 定义过渡效果何时开始 animation 指定要绑定到选择器的关键帧的名称
13. CSS优先级
- !important（优先级最高）
- id 选择器
- class选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
- 通配符选择器、关系选择器 （优先级最低）
14.title与h4的区别、b与strong的区别、i与em的区别？
<b>与 <strong>用在网页上都能使字体加粗，二者的不同是：<b>是物理元素 ;<strong>是逻辑元素。
物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而<strong>可以从字面理解知道它是强调的意思，<strong>是逻辑标签，强调文档逻辑。
对于搜索引擎（SEO）来说，<strong>比<b>重视的多。
<em>和<i>都是斜体，但是<em>是逻辑元素，<i>是物理元素。
15.BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与,
哪些情况会产生BFC:
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
二、JS
0.基本数据类型
- null
- undefind
- Boolean
- String
- Number
- symbol
1.typeof和instance of 检测数据类型有什么区别？
相同点： 都常用来判断一个变量是否为空，或者是什么类型的。
不同点：
- typeof 返回值是一个字符串，用来说明变量的数据类型
- instanceof 用于判断一个变量是否属于某个对象的实例
2.元素消失的方法
- opacity:0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发。
- visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
- display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。
- z-index:-1
3.浅拷贝和深拷贝
浅拷贝只是对指针的拷贝，拷贝后两个指针指向同一个内存空间
深拷贝不但对指针进行拷贝，而且对指针指向的内容进行拷贝，经深拷贝后的指针是指向两个不同地址的指针。
4.es6的新特性
-
let定义块级作用域变量 没有变量的提升，必须先声明后使用 let声明的变量，不能与前面的let，var，conset声明的变量重名
-
const 定义只读变量 const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改 const声明变量也是一个块级作用域变量 const声明的变量没有“变量的提升”，必须先声明后使用 const声明的变量不能与前面的let， var ， const声明的变量重 const定义的对象\数组中的属性值可以修改,基础数据类型不可以
- ES6可以给形参函数设置默认值
- 数组之前加上三个点（...）展开运算符
- 数组的解构赋值、对象的解构赋值
-
箭头函数的特点 箭头函数相当于匿名函数，是不能作为构造函数的，不能被new 箭头函数没有arguments实参集合,取而代之用...剩余运算符解决 箭头函数没有自己的this。他的this是继承当前上下文中的this 箭头函数没有函数原型 箭头函数不能当做Generator函数，不能使用yield关键字 不能使用call、apply、bind改变箭头函数中this指向 Set数据结构，数组去重
5.==和===区别是什么？
==返回一个布尔值；相等返回true，不相等返回false； 允许不同数据类型之间的比较； 如果是不同类型的数据进行，会默认进行数据类型之间的转换； 如果是对象数据类型的比较，比较的是空间地址
=== 只要数据类型不一样，就返回false；
6.call bind apply 的区别？
- 都是用于改变this指向
- 通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。
- 通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。
7.js继承方式
- 原型链继承 核心： 将父类的实例作为子类的原型
- 构造继承 核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类
- 实例继承 核心：为父类实例添加新特性，作为子类实例返回
- 拷贝继承
- 组合继承 核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现 函数复用
- 寄生组合继承 核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实 例方法/属性，避免的组合继承的缺点
8.闭包的理解
在函数的内部可以访问全局变量，但是在函数的外部无法访问函数内部的局部变量。 有时候我们需要获取函数内部的局部变量，此时就要使用到闭包。 做法就是在函数内部再定义一个函数，这个函数就可以访问外部的变量，之后我们再把内部函数作为外部函数的返回值，这样就可以在外部函数中读取到局部变量了。 闭包就是定义在一个函数内部的函数，是连接内外函数的桥梁。
9.原型和原型链
把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回null
10.浏览器输入网址到页面渲染全过程
- DNS解析
- TCP连接（三次握手）
- 发送HTTP请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析渲染页面
- 关闭TCP连接（四次挥手）
11. cookies，sessionStorage 和 localStorage 的区别
相同点：都是保存在浏览器端，且同源的。
不同点：
- cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。
- 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
- localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
- cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
- localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
12.js中跨域方法
- jsonp跨域(只能解决get）
- document.domain 基础域名相同 子域名不同
- window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name
- 服务器设置对CORS的支持 原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
- 利用h5新特性window.postMessage()
- Web Sockets
13. 页面优化方法
- 减少 HTTP请求数
- 从设计实现层面简化页面
- 合理设置 HTTP缓存
- 资源合并与压缩
- 合并 CSS图片，减少请求数的又一个好办法。
- 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
- 多图片网页使用图片懒加载。
- 在js中尽量减少闭包的使用
- 尽量合并css和js文件
- 尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片
- 减少对DOM的操作
- 在JS中避免“嵌套循环”和 “死循环”
- 尽可能使用事件委托（事件代理）来处理事件绑定的操作
14.Ajax步骤
- 创建ajax实例
- 执行open 确定要访问的链接 以及同步异步
- 监听请求状态
- 发送请求
15. 数组去重的方法
function unique(arr){
var arr2 = arr.sort();
var res = [arr2[0]];
for(var i=1;i<arr2.length;i++)
{ if(arr2[i] !== res[res.length-1]){ res.push(arr2[i]); } }
return res; }
利用下标查询
function unique(arr){
var newArr = [arr[0]];
for(var i=1;i<arr.length;i++){ if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]); } }
return newArr; }
16. ajax中get和post请求的区别
- get 一般用于获取数据
- get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；
- get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
- get安全性较低
- get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
- post 一般用于发送数据
- post传递参数，需要把参数放进请求体中，发送给服务器；
- post请求参数放进了请求体中，对大小没有要求；
- post安全性比较高；
- post请求不会走缓存；
17.ajax的状态码
2开头（成功）
3开头（重定向）
- 301 : 永久重定向；
- 302: 临时转移
- 304 : 读取缓存 [表示浏览器端有缓存，并且服务端未更新，不再向服务端请求资源]
- 307:临时重定向
4开头（客户端）
- 400 :数据/格式错误
- 401: 权限不够；（身份不合格，访问网站的时候，登录和不登录是不一样的）
- 404 : 路径错误，找不到文件
5开头（服务器）
18. 常见的异步任务
- 定时器
- ajax
- 事件绑定
- 回调函数
- async await
- promise
19. 作用域
- 全局作用域
- 私有作用域
- 块级作用域
- 上级作用域
20. Promise处理异步
他是ES6中新增加的一个类（new Promise）,目的是为了管理JS中的异步编程的，所以把他称为“Promise设计模式” new Promise 经历三个状态：padding(准备状态：初始化成功、开始执行异步的任务)、fullfilled(成功状态)、rejected(失败状态)== Promise本身是同步编程的，他可以管理异步操作的（重点），new Promise的时候，会把传递的函数立即执行 Promise函数天生有两个参数，resolve(当异步操作执行成功，执行resolve方法),rejected(当异步操作失败，执行reject方法) then()方法中有两个函数，第一个传递的函数是resolve,第二个传递的函数是reject ajax中false代表同步，true代表异步，如果使用异步，不等ajax彻底完成
21. map和forEach的区别
相同点
- 都是循环遍历数组中的每一项 forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组），需要用哪个的时候就写哪个 匿名函数中的this都是指向window 只能遍历数组
不同点
- map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。(原数组进行处理之后对应的一个新的数组。)
- map()方法不会改变原始数组 map()方法不会对空数组进行检测
- forEach()方法用于调用数组的每个元素，将元素传给回调函数.(没有return，返回值是undefined）
22.async await函数
- 异步代码的新方式
- 基于promise实现的
- 异步代码更像同步代码
- await 只能在async函数中使用，不能再普通函数中使用，要成对出现
- 默认返回一个promise实例
- await下面的代码是异步，后面的代码是同步的
23.this指向
- 普通函数非严格模式下调用的时候指向于Window,严格模式指向为undefind
- 构造函数调用this指向于实例对象
- 对象方法调用this指向与该方法所属的对象
- 事件绑定方法this指向于绑定事件对象
- 定时器函数this指向于Window
- 自执行函数中的this永远指向window
- 箭头函数没有this，this是指向于外面的一层，如果没有则指向Window
24. 异步回调（如何解决回调地狱）
promise、generator、async/await
promise： 1.是一个对象，用来传递异步操作的信息。代表着某个未来才会知道结果的时间，并未这个事件提供统一的api，供进异步处理 2.有了这个对象，就可以让异步操作以同步的操作的流程来表达出来，避免层层嵌套的回调地狱 3.promise代表一个异步状态，有三个状态pending（进行中），Resolve(以完成），Reject（失败） 4.一旦状态改变，就不会在变。任何时候都可以得到结果。从进行中变为以完成或者失败 promise.all() 里面状态都改变，那就会输出，得到一个数组 promise.race() 里面只有一个状态变为rejected或者fulfilled即输出 promis.finally()不管指定不管Promise对象最后状态如何，都会执行的操作（本质上还是then方法的特例）
25.前端事件流
- 事件捕获
- 事件目标
- 事件冒泡
26.事件如何先冒泡后捕获
在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果， 对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。
27. 如何判断一个变量是对象还是数组（prototype.toString.call()）
千万不要使用typeof来判断对象和数组，因为这种类型都会返回object。
28.cookie、Session和token的区别
Token就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件，Token的状态是存储在客户端。
cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名；
session和cookie差不多，只是Session是写在服务器端的文件，也需要在客户端写入cookie文件，但是文件里是你的浏览器编号。Session的状态是存储在服务器端，客户端只有Session id；
29.JS全局函数
- escape( )
- eval_r( )
- isFinite( )
- isNaN( )
- parseFloat( )
- parseInt( )
- unescape( )
30.JS内置可迭代对象
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象
31.数组常用的方法
常用的方法有14个，6个会改变原数组的方法，8个不会改变原数组的方法
改变原数组的方法：
- push() ：尾增 返回新增元素后数组的长度
- pop() ：尾删 被删除的项
- shift() ：头删 被删除的项
- unshift() ：头增 删除元素后数组的长度
- reverse()：反转 反转后的新数组
- sort(fun(){}) ：排序 排序后的新数组
- 参数为一个函数，该函数有两个形参，对应为before和after，可以这个函数中书写排序的方法，返回值为负值时，升序，正值降序，也可以直接写return a＞b 或者return a＜b前者对应降序，后者对应升序
不改变原数组的方法：
- slice(a,b) ：查找 查找出的值组成的数组
- （n,m） 查找下标：[n,m)
- （n） 查找下标：n到最后一个元素
- （0） 复制一遍原数组，可用于克隆
- （-m,-n）从后往前查，-1表示最后一项，-2表示表示倒数第二项
- splice(n,x,m) ：增、删、改 对应操作后得到的新数组
- （n,x,m）从下标为n的元素开始，删除x个元素，在此位置将m插入
- （n,0,m）从下标为n开始，不删除元素，直接插入m
- （n,x）从下标为n开始，删除x个元素
- join('-')： 返回用指定分隔符拼接成的字符串
- concat(arr1, arr2, str3...) ：拼接 拼接后的新数组
- indexOf(item, star) ： 从star下标开始查找，第一次出现item元素的索引，未找到返回-1
- lastIndexOf(item, star) ： 最后一次出现的索引
- includes(item) ： 是否包含指定元素
- forEach(function(item, index, arr){}) ：遍历
- item：遍历的每一项
- index：索引
- arr：当前数组
三、Vue
1.V-model的原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
2.谈谈对生命周期的理解
- beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
- created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
- beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点
- mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
- beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
- updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
- beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
- destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁
3. vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。 mutation会修改state中对于的值。 最后通过getter把对应值跑出去，在页面的计算属性中 通过mapGetter来动态获取state中的值
4.vuex有哪几种状态和属性
- state中保存着共有数据，数据是响应式的
- getter可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用
- mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的
- actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
- modules：模块化vuex
5.vue路由的两种模式
- hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算） hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
- history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法
这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。
6.vue中 key 值的作用
key是vue中的 vnode标记的唯一id,通过这个key,我们的df算法操作可以更准确,更快速的算出那个dome元素需要修改。如果不加key,那么vue会选择复用节点vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug
key的作用主要是为了高效的更新虚拟DOM。
7. $route和$router的区别
- $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
- $router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
8.vue-router守卫
全局守卫
- router.beforeEach 全局前置守卫
- router.afterEach 全局后置守卫
组件守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
9. vue修饰符
- stop：阻止事件的冒泡
- prevent：阻止事件的默认行为
- once：只触发一次
- self：只触发自己的事件行为时，才会执行
10.vue项目中的性能优化
- 不要在模板里面写过多表达式
- 循环调用子组件时添加key
- 频繁切换的使用v-show，不频繁切换的使用v-if
- 尽量少用float，可以用flex
- 按需加载，可以用require或者import()按需加载需要的组件
- 路由懒加载
11.V-if和V-show区别
v-if是”真正”的渲染,每次为ture的时候会渲染dome元素出来, v-show页面一初始化的时候就渲染出来,只是根据条件去改变 display的属性,实现显示和隐藏,如果是经常切换的条件不建议使用vⅱ进行条件判断,非常频繁的切换建议,使用 v-show进行判断比较好。
秋招参考
转载：
最新的前端大厂面经（详解答案） - 掘金 (juejin.cn)
转载：
2021年我的前端面试准备 (juejin.cn)
转载：
听说前端面试手写”节流防抖“你不会？用动画带你秒懂！ (juejin.cn)
转载：
前端常考的算法题 (juejin.cn)
[译] 送你 43 道 JavaScript 面试题 - 掘金 (juejin.cn)
