移动端常用tap作为点击事件，好处是什么，会带来什么问题
1.tap事件 为了减少这300ms的延迟，tap事件被很多框架（如zepto）封装，来减少这延迟问题， tap事件不是原生的，所以是封装的
2.点透问题 如果我们在移动端所有的click都替换为了tap事件，还是会触发点透问题的
解决方案：
（1）使用fastclick （2）添加一个延迟。
解决300ms延迟问题
方法一：禁止缩放（在meta标签中设置） Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作
方法二：更改默认的视口宽度（在meta标签中设置） Chorm和Firfox支持，Safari比较麻烦他还有双击缩放还有双击滚动操作
方法三：css touch-action IE支持
方法四：FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库
原理：在检测到touchend事件的时候，会通过DOM自定义事件立即发出模拟一个click事件，并把300ms之后发出的click事件阻止掉。
QQ授权登录流程：
一、申请appid和appkey以及回调地址
二、放置“QQ登录按钮”可在官网拿取图片
三、请求获取Authorization Code值 请求成功后， 利用window.open 会打开QQ登录界面
四、请求获取Access Token值
五、获取OpenID值
六、使用OpenID获取该QQ用户的相关信息
B2B、B2C、C2C、O2O分别是什么意思？
1、B2B 是指进行电子商务交易的供需双方都是商家（或企业、公司），她（他）们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表现形式。
2、B2C是Business-to-Customer的缩写，而其中文简称为“商对客”。“商对客”是电子商务的一种模式，也就是通常说的直接面向消费者销售产品和服务商业零售模式。
3、C2C实际是电子商务的专业用语，是个人与个人之间的电子商务。其中C指的是消费者，因为消费者的英文单词是Customer（Consumer），所以简写为c，又因为英文中的2的发音同to，所以C to C简写为C2C。C2C即 Customer（Consume） to Customer（Consumer）。
4、O2O即Online To Offline（在线离线/线上到线下），是指将线下的商务机会与互联网结合，让互联网成为线下交易的平台，这个概念最早来源于美国。O2O的概念非常广泛，既可涉及到线上，又可涉及到线下,可以通称为O2O。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。
什么是深浅拷贝，如何实现
什么是浅拷贝？
浅拷贝是指copy的对象和被copy的对象它们公用一个实体，也就是同时指向内存中的一个相同的地址
什么是深拷贝？
深拷贝是指copy的对象和被copy的对象两个都是独立的、互不影响的。
一般来讲，值类型的copy都属于深拷贝，而引用类型copy都属于浅拷贝（string类型除外）。
实现深浅拷贝
JSON.stringify与JSON.parse可以实现深拷贝，还能结合localStorage实现对象数组存储
还可以借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
跨域问题
Jsonp
（优点：简单方便 缺点：只能get方式，不支持post方式）
axios反向代理 cors服务器端修改包的头部信息
通过iframe来跨子域（不常用）
用window.name来进行跨域（不常用）
SCSS和SASS的区别
Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：
1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。
class 和id有什么区别？
ID加前缀"#"；CLASS用"."
id一个页面只可以使用一次；class可以多次引用。
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
ID是一个标签，用于区分不同的结构和内容
class是一个样式，可以套在任何结构和内容上
怪异盒子和盒子模型
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒子，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
重绘与回流
回流： 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
重绘： 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘
注意：回流必将引起重绘，而重绘不一定会引起回流。 我们需要明白，页面若发生回流则需要付出很高的代价。
下述情况会发生浏览器回流：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
如何减少回流、重绘
减少回流、重绘其实就是需要
减少对render tree的操作（合并多次多DOM和样式的修改），
并减少对一些style信息的请求，尽量利用好浏览器的优化策略。
文档碎片
jq对象 转化为 js对象
jq对象添加下标为0 ===> $("#v")[0]
Jq的选择器
jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery 伪类 选择器
jQuery 库中的 $() 是什么？
$() 函数是 jQuery() 函数的别称
JavaScript window.onload 事件和 jQuery ready 函数有何不同？
前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载
jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快
$(this) 和 this 关键字在 jQuery 中有何不同？
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素
jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。
jQuery 中的方法链是什么？使用方法链有什么好处？
方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。
你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？
这通常用于阻止事件向上冒泡。
哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？
第一种，因为它直接调用了 JavaScript 引擎。
JQ节点操作
1.节点查找
siblings(),prev(),prevAll(),next(),nextAll(),children(),parent(),parents()等方法，用来根据文档树，选取某一节点的同辈、后辈，父辈元素，得到的仍然是jq节点对象的数组；
eq(),lt(),gt()用来选取jq节点对象的数组中的项，结果仍为一个jq节点对象的数组；
2.节点增加
需要先创建节点，$('
aaaa
')可以直接创建节点，并且为节点输入内容；父节点.append(要插入的节点)：在父节点内部末尾插入节点
prepend()：在父节点的内部开始插入节点
before()：在某节点的前面插入节点
after()：在某节点的后面插入节点
3.节点删除
节点.remove()：删除该节点；
节点.empty()：清空节点内的所有内容；
jQuery.delegate() 函数详解
delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。
apply和call的异同点?
相同点: 都是可以改变this指向
不同点: apply通过数组形式传参
call直接传参,用逗号隔开
NaN 是什么？它的类型是什么？
NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的，不能执行的原因要么是因为其中的运算对象之一非数字（例如， "abc" / 4），要么是因为运算的结果非数字（例如，除数为零）。
然 NaN 意味着“不是数字”，但是它的类型，不管你信不信，是 Number
简述cookie localStorage sessionStorage
cookie：可用于身份标识，内存减少，一般为4KB，一般以明文传播（可用MD5,ECB进行加密处理），可跨页面，过期时间可由自己设置。
localStorage:存储限制要大得多（至少5MB），信息永远不会传输到服务器,永久保存，需要手动清除
sessionStorage：它只存储一个会话的数据。当用户关闭特定浏览器选项卡时，将删除数据。不可跨页面
三种方式都不可以跨浏览器。
你所知道的所有性能优化
1.减少请求 2.代码优化 3.打包压缩文件 4.字体图标，精灵图。 5.图片懒加载
6.减少cookie使用 7.尽量少操作dom以避免重绘和回流，文档碎片 8.减少闭包使用，防止内存泄露
9.用户行为预测 10.使用离线缓存 11.分页加载数据 12.防抖节流 13.模块按需加载 14.路由懒加载
jquery中get()提交和post()提交的区别
相同点：都是异步请求的方式来获取服务器端的数据；
异同点：
1、请求方式不同：get使用 GET 方法来进行异步请求的；post方法使用POST方法来进行异步请求的；
2、参数传递方式不同：get请求参数跟在URL后，用户可见，POST请求作为HTTP消息的实体内容发送给Web服务器的，用户不可见的；
3、数据传输大小不同：get方式传输数据大小不能超过2KB，而POST要大的多；
4、安全问题：GET方式请求的数据会被缓存起来，因此有安全问题；
你所理解的闭包
闭包就是能够读取其他函数内部变量的函数。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
封闭性： 外界无法访问闭包内部的数据
持久性：外部函数被调用之后，闭包结构依然保存在
缺点：闭包携带包含它函数的作用域，因此比其他函数占用的内存更多，泄露内存。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
优点：减少创建全局变量 减少传递给函数的参数量
ES6新特性
1. const 与 let 变量
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.
2.模板字面量
3.解构
在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量
4.for...of循环
for...of 循环用于循环访问任何可迭代的数据类型。
5.展开运算符
展开运算符用三个连续的点 (...) 表示使你能够将字面量对象展开为多个元素
6.ES6箭头函数
箭头函数没有自己的this而是引用外层的this。
7.函数默认参数
es6为参数提供了默认值。在定义函数时便初始化了这个参数
8.class、 extends、 super
9.Promise
代码优美，避免了地狱回调
它有三个状态：
pending就是未决，
resolve可以理解为成功，
reject可以理解为拒绝。
10.set map Set和Map分别用来声明一个数组和对象。
11.模块化开发
js 绑定事件
① 行内绑定
② 动态绑定
onclick
③ 事件监听
addEventListener()函数
三个参数，第一个参数是事件的名字，如click事件，第二个参数就是事件处理函数，第三个参数默认就写flase就好了，因为这是关于事件捕获和事件冒泡的
兼容IE8.0及其以下版本：attachEvent
浏览器兼容
var winW=document.body.clientWidth || document.docuemntElement.clientWidth;//网页可见区域宽
//以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离
var screenH=window.screen.height;//屏幕分辨率的高
var screenW=window.screen.width;//屏幕分辨率的宽
var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
var screenYY=window.screenY;//FireFox相对于屏幕的y坐标
event事件问题
document.οnclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.οnclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.οnclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
DOM节点相关，主要兼容IE 6 7 8
function nextnode(obj){//获取下一个兄弟节点
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else{
return obj.nextSibling;
};
}
function prenode(obj){//获取上一个兄弟节点
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else{
return obj.previousSibling;
};
}
function firstnode(obj){//获取第一个子节点
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
}
function lastnode(obj){//获取最后一个子节点
if (obj.lastElementChild) {
return obj.lastElementChild;//非IE678支持
} else{
return obj.lastChild;//IE678支持
};
}
设置监听事件
function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
};
}
function removeEvent(obj,type,fn){//删除事件监听
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
};
}
js阻止事件传播，这里使用click事件为例
document.οnclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
js阻止默认事件
document.οnclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail);//若前滚的话为 -3，后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚：120，后滚：-120
}
垃圾回收机制
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
#、Java、JavaScript有自动垃圾回收机制 但c++和c就没有垃圾回收机制
一个变量的生命周期结束之后它所指向的内存就应该被释放 局部变量 函数结束完就回收 全局变量生命周期会持续到浏览器关闭页面。
JS垃圾回收方式
JS执行环境中的垃圾回收器怎样才能检测哪块内存可以被回收有两种方式：标记清除（mark and sweep）、引用计数
标记清除（mark and sweep）
垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。
引用计数(reference counting)
这种方式常常会引起内存泄漏，低版本的IE使用这种方式。机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。
CSS hack 写法
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
属性级Hack，选择器Hack以及IE条件Hack
属性前缀法(即css类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox对于前述三个都不能识别等等
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
尽可能减少对CSS Hack的使用。
js原型和原型链
js它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。
原型链:
每一个对象都有一个__proto__属性,指向构造该对象的构造函数的原型对象
每个构造函数都有一个prototype属性,这个属性指向它的原型对象,简称"原型"
JavaScript 严格模式(use strict)
使用 "use strict" 指令
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
为什么使用严格模式:
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。
知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg，Webp, Apng
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
APNG：是一个基于PNG（Portable Network Graphics）的位图动画格式，扩展方法类似主要用于网页的GIF 89a，仍对传统PNG保留向下兼容
谈谈以前端角度出发做好SEO需要考虑什么
了解搜索引擎如何抓取网页和如何索引网页
Meta标签优化
何选取关键词并在网页中放置关键词
了解主要的搜索引擎
主要的互联网目录
按点击付费的搜索引擎
合理的标签使用
链接交换和链接广泛度（Link?Popularity）
简单的HTTP协议
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写。HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同， 用于客户端和服务器之间的通信。请求访问文本或图像等资源的一端称为客户端， 而提供资源响应的一端称为服务器端。
1.协议部分
2.域名部分
3.端口部分
4.虚拟目录部分
5.文件名部分
6.锚部分
7.参数部分
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
简述MVC和MVVM
- MVC 后端的分层开发概念
Model(数据层) View(视图层) Controller(逻辑层)
- MVVM 前端视图层的概念，主要关注于视图层分离，MVVM把前端的视图层分为了三部分
Model View (VM ViewModel)
其中 vm 是MVVM思想核心，因为VM是v 和 m 之间的调度者
每当v层想要保存或读取数据的时候都要经过vm做中间处理
vm提供了数据的双向绑定
什么是前端模块化，组件化，工程化？
1.前端模块化：
可以理解为一组自定义业务的抽象封装，是根据项目的情况来进行封装组合到一起的，比如我们可以分为登录模块，评论模块。模块可维护性好，组合灵活，方便调用，多人协作互不干扰。
2.前端组件化：
指对具体的某个功能的封装，比如所有的分页可以封装为分页组件来统一使用，以此来达到组件复用，提高开发效率。
3.前段工程化：
概念：指使用软件工程的技术和方法来进行前端项目的开发、维护和管理。
前端工程化包含如下：
1.代码规范: 保证团队所有成员以同样的规范开发代码。
2.分支管理:不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。
3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。（以上两点可以总结为模块化或者组件化开发。）
4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。
5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，
6.部署。 将构建好的代码部署到生产环境。
VUE框架
创建项目过程：
1.搭建node环境
2.npm install webpack -g --全局安装webpack
3.npm install vue-cli -g --全局安装vue-cli
4.使用webpack初始化项目
vue init webpack my-project
5.进入项目
cd ***
6.启动项目
npm run dev
V指令
v-bind:attr==>简写成 :attr 绑定属性
v-if: 条件判断(消失于DOM树)
v-show: 条件判断(样式隐藏)
v-for: 循环
v-on:eventName: 事件绑定==>简写成 @click
v-model: 双向绑定
v-once: 单次绑定(无法响应多次)
v-slot: 插槽
v-html: 将html内容显示(如不加该指令,则显示字符串"
显示字符串
")VUE生命周期
创建前:beforeCreate
创建后:created 用于数据获取
挂载前:beforeMount
挂载后:mounted
更新前:beforeUpdate
更新后:updated
卸载前:beforeDestroy
卸载后:destroyed
计算属性computed
计算属性和方法:
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，
多次访问 now 计算属性会立即返回之前的计算结果，而不必再次执行函数。
--可用于性能开销比较大的逻辑处理
路由传参
1.通过params传参(参数显示在url上,安全性低)
/user/Foo/12345
--通过this.$route.params获取参数
2.通过params传参(参数不显示在url上)--刷新页面会导致参数丢失
/user/Foo
--通过this.$route.params获取参数
3.通过query传参(参数拼接在url上)
/user/Foo?num=12345&name=foo&age=18&info=路由传参
--通过this.$route.query获取参数
路由守卫
完整的导航解析流程
导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
全局导航守卫：beforeEach afterEach beforeResolve
组件导航守卫：beforeRouteEnter beforeRouteLeave beforeRouteUpdate
路由独享守卫：beforeEnter
VUEX