前端面试题

项目：

什么是跨域？解决的办法？

跨域，就是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。同源的话就是，域名，协议，端口均相同。

解决办法：
1.jsonp：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的callback函数，并把把我们需要的json数据作为参数传入。在服务器端，当req.params参数中带有callback属性时，则把数据作为callback的参数执行，并拼接成一个字符串后返回。 
2.后端在头部信息里面设置安全域名。

项目性能优化

图片懒加载，路由懒加载
使用外部 JavaScript 和 CSS，
把样式表放在 link 中，
把 JavaScript 放在页面底部，
减少 HTTP 请求数
第三方插件的按需加载

 项目难点

mounted钩子函数中请求数据导致页面闪屏问题：
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏。
页面缓存的坑：
有个填写信息的页面，需要填写一部分信息，进入查新协议页面，返回的时候，页面上填写的信息还需要留存。  
解决办法：使用vue提供的keep-alive，来完成页面的缓存的。

什么是前后端分离?说说你对前后端分离的理解?

 前端负责将数据按照产品设计渲染以及调用后端接口实现产品功能，而后端则提供数据接口，功能接口！前后端分离的开发模式是为了让专业的人做专业的事，并且现在前端和后端可以通过接口文档实现并行开发，提高开发效率。

html、css：

css水平垂直居中的方法：

1.flex
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
2.position 
    父元素设置为：position: relative;
    子元素设置为：position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

1rem等于多少px，换算公式

1rem等于html根元素设定的font-size的px值
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

浏览器兼容性问题

一.不同浏览器的margin和padding不同
        1.一般会使用*{margin：0,；padding：0；}  但是性能不好
        2.下载引入一个reset.css 的插件
二.css3新属性，加浏览器前缀兼容早期浏览器
        -moz-  兼容火狐浏览器
        -webkit-  兼容谷歌浏览器
        -ms-    兼容IE浏览器

less和sass的区别

Less是基于JavaScript，是在客户端处理的，而Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

具体说说flex

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex，让这个flex成为一个容器，它的所有子元素都会成为它的项目。

使用css使文字超出部分用省略号三个点…显示的方法

    overflow: hidden;
    word-break: keep-all;(不换行）
    white-space: nowrap;(不换行）
    text-overflow: ellipsis;（添加...）

对BFC的理解

他就是建立一个与外界毫不相干的盒子，不受外界影响，也不影响外界。

html5新特性有哪些

1.语义化标签：<header><article><footer><nav><aside><section>等；
2.新增视频 <video> 和音频 <audio> 标签
3.Canvas绘图
5.SVG绘图

浏览器重绘与重排

重排: 当页面中的HTML结构发生改变(增加、删除元素、位置发生改变等等)，只要结构发生改变，浏览器都需要从新的计算一遍最新的dom结构，重新对当前的页面进行渲染
重绘: 当元素的背景、透明度、颜色发生变化，那么浏览器会对元素进行重新描绘；这个过程就是浏览器的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何减少重绘和重排以提升页面性能：
（1）不要一个个修改属性，应通过一个class来修改。 div.className+=" modify";
（2）批量添加DOM：多个DOM插入或修改，应组成一个长的字符串后一次性放入DOM。

标准盒模型和怪异盒模型

box-sizing=content-box 标准盒模型，默认    box-sizing=border-box 怪异盒模型
标准盒模型计算方式=width+左右内边距+左右边框+左右外边距
怪异盒模型计算方式=width+左右外边距

选择器的优先级

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1

清除浮动

1.给父元素单独定义高度
2.父级定义overflow：hidden；
3.在浮动元素后面加一个空标签，clear：both；
4.父级定义overflow：auto

js：

数组和字符串的相互转化

var arr = [1,2,3]
//数组转字符串-----------join方法
var str = arr.join(",")  ===> "1,2,3"
//字符串转数组-----------split方法
str.split(",")  === > ['1', '2', '3']

数组去重

for循环嵌套for循环 然后用 splice方法
新建数组 用indexof
用es6的set方法

合并对象的方法

…扩展运算符

合并数组的方法

concat
slice+push

nexttick

swipper 调用接口有数据 但是空白 显示不出来图片  可以用 nexttick

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

变量提升是什么

变量会提升到其所在函数的最上面，而不是整个程序的最上面。
只有声明本身会被提升，而赋值操作不会被提升。
函数声明会被提升，但函数表达式不会被提升。

原型和原型链

原型：
每个函数都有一个prototype属性，被称为显示原型；
每个实例对象都会有_ _proto_ _属性,其被称为隐式原型；
每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype；
每个prototype原型都有一个constructor属性，指向它关联的构造函数。

原型链：
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

原型链和作用域链的区别

（1）原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object

宏任务微任务

宏任务包括：setTimeout setInterval Ajax DOM事件
微任务：Promise async/await
微任务>宏任务

http常见状态码

200：请求成功。
301：重定向。
400: 请求报文中存在语法错误。
404：请求的资源没有找到。
500：服务器内部发生了错误。

js判断类型，js数据类型

1.typeof：基本数据类型没有问题，引用数据类型有问题。
2.instanceof：基本数据类型会有问题，而引用数据类型没有问题。
3.constructor：除了undefined和null，其它变量都能使用constructor判断类型。
4.Object.prototype.toString.call（）；
5.jquery中的$.type（）

null和undefined的区别:
null表示"没有对象"，即该处不应该有值。undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

js基本数据类型：
Undefined、Null、Boolean、Number、String、森bou
js引用数据类型：
function，error，object

== 和 ===的区别

==是非严格意义上的相等，值相等就相等
===是严格意义上的相等，会比较两边的数据类型和值大小，他们都相等才相等

this 指向

this指向函数的直接调用者
如果有new关键字，this指向new出来的对象
在事件中，this指向触发这个事件的对象

过滤器，全局和局部过滤器

过滤器是实现变量的格式化输出；
全局过滤器  是在多个实例中可以使用的过滤器
Vue.filter(“名”，function(value){
    // value是调用过滤器的属性的值
})
调用：  在v-bind中或者{{ 属性|过滤器名}}

局部过滤器  只是在当前的组件或者实例中使用
filters:{
    名：function(val){
    }
}
调用：  {{变量|过滤器1|过滤器2}}

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

普通函数：1.可以通过bind、call、apply改变this指向  
        2.可以使用new调用函数
箭头函数：1.不能通过bind、call、apply改变this指向。
        2.使用new调用箭头函数会报错，因为箭头函数没有constructor。
        3.箭头函数外层没有普通函数时，this指向window。
        4.本身没有this指向，它的this在定义的时候继承自外层第一个普通函数的this。

bind、call、apply

bind、call、apply都是改变this指向的方法
bind和call语法一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8
call和apply基本上一致，唯一区别在于传参方式

垃圾回收和内存泄漏

垃圾回收：浏览器的 Javascript 具有自动垃圾回收机制，也就是说，执行环境会管理代码执行过程中使用的内存。原理就是垃圾收集器会定期找出那些不在继续使用的变量，然后释放其内存，但是这个过程不是实时的，而是垃圾回收器会按照固定的时间间隔周期性的执行。
js中最常用的垃圾回收方式就是标记清除。在函数中声明一个变量，就将这个变量标记为“进入环境”。而当变量离开环境时，则将其标记为“离开环境”。

内存泄漏：程序的运行需要内存，只要程序提出要求，系统就必须供给内存。对于持续运行的服务进程，必须及时释放不再用到的内存，而没有及时释放的内存，就叫做内存泄漏。

继承

原型链继承:父类的实例作为子类的原型。
优点：简单易于实现，父类的新增的实例与属性子类都能访问。
缺点：无法实现多继承。

借用构造函数继承:复制父类的实例属性给子类
优点：可以实现多继承
缺点：方法都在构造函数中定义，无法复用。

实例继承：
优点：不限制调用方式，简单，易实现。
缺点：不能多次继承。

栈和堆的区别:

1、堆：动态分配内存，内存大小不一，也不会自动释放
2、栈：自动分配相对固定大小的内存空间，并由系统自动释放
区别：
    基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。
    引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。

JS哪些操作会造成内存泄露

内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
1、意外的全局变量
2、闭包
3、没有清理的dom元素
dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
4、被遗忘的定时器或者回调

什么是闭包，如何使用它，为什么要使用它？

闭包就是能够读取其它函数内部变量的函数
使用方法：在一个函数内部创建另一个函数
最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
缺点：会引起内存泄漏（引用无法被销毁，一直存在）

关于JS事件冒泡与JS事件代理（事件委托）

（1）事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window，过程就像冒泡泡 。如果在某一层想要中止冒泡，使用 event.stopPropagation()   
（2）事件委托
将事件给最外层的元素，自己不实现逻辑，由最外层元素来代理。（判断事件源，做不同处理）

promise、Async/Await有什么区别

什么是promise
为了解决异步嵌套而产生，让代码更易于理解
Promise本身是同步的,他的then方法和catch方法是异步的
promise的三种状态
pending 等待状态   fulfill 满足状态    reject 拒绝状态
什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步，他是基于Promise实现的，但它不能用于普通的回调函数。
区别，async/await让代码更像同步，进一步优化了代码

同步异步的区别

举个例子来说，一家餐厅吧来了5个客，来第一个点了个鱼， 厨师去捉鱼杀鱼，过了半小时鱼好了给第一位客人，开始下位一位客人，就这样一个一个来，按顺序来，这就是同步；异步的意思就是来第一位客人，点一个鱼，给它一个牌子，让他去一边等，下一位客人接着点菜，点完接着点让厨师做去吧，哪个的菜先好就先端出来，

同步的优点是：同步是按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面的代码。
缺点：是解析的速度没有异步的快。
异步的优点是：异步是接取一个任务，直接给后台，在接下一个任务，一直一直这样，谁的先读取完先执行谁的。
缺点：没有顺序 ，谁先读取完先执行谁的 ，会出现上面的代码还没出来下面的就已经出来了，会报错。

http请求过程+如何渲染页面

1、域名解析获取IP地址
2、发起TCP连接的3次握手
3、建立TCP连接后发起http请求
4、服务器端响应http请求，浏览器得到html代码
5、浏览器解析html代码，并请求html代码中的资源
6、浏览器对页面进行渲染呈现给用户
渲染：1.解析HTML文件，创建DOM树。2.解析CSS。3.将CSS与DOM合并，构建渲染树。4.布局和绘制，重绘和重排。

http登录模块加密登录安全登录方法

1、登录请求分两次进行，第一次仅传用户名
2、服务器收到用户名后，生成一串随机数，将随机数响应给客户端，并将用户名和随机数存到session
3、客户端收到响应后，将密码和随机数安一定的规则组合起来，再md5加密，再http请求
4、服务器收到请求，取出session中的用户名和随机数串，核对用户名，再取数据库中的正确密码，再按相同的规则与随机数组合并md5加密，再比较请求的密码暗文，返回登录结果。

localStorage、sessionStorage和cookie是什么

它们都是用来保存信息的
大小区别：
    localStorage、sessionStorage 可以存储5m，  cookie只能存储4kb。
有效期的区别：
    localStorage可以长期存储数据，浏览器关闭后数据不丢失，除非手动删除。
    sessionStorage存储数据在浏览器关闭时自动删除。
    cookie可设置过期时间，浏览器关闭后自动消失。
安全问题：
    cookie会把消息上传到服务器端最不安全。
    localstorage和sessionstorage都会留在本地所以更安全。
存储位置不同：
    localstorage和sessionstorage是把数据存储到本地，cookie是把数据存储在服务端。

var let const 区别

var属于函数作用域，let和const属于块级作用域。
var声明的变量存在变量提升，let和const不存在变量提升。
var允许重复声明变量，let和const在同一作用域不允许重复声明变量。

let声明的变量，const声明的常量。
let声明的变量可以改变，值和类型都可以改变。
const声明的常量不能改变值，就是说，const一旦声明变量，就要立马初始化，不能留到以后赋值。

js常用的循环

有for...in...和for..of...和for...Each...还有map

for...Each..和map的区别：
forEach() 有三个参数，数组内容item、索引index、当前数组Array，但是没有返回值
map() 和foreach基本相同，但是map有返回值，可以返回出来
共同点：即可遍历数组，又可遍历对象

for···in和for···of的区别：
1.从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；
2.从遍历字符串的角度来说，同数组一样。
3.从遍历对象的角度来说，for···in会遍历出来的为对象的key，但for···of会直接报错。

js中常用的数组方法

shift()  删除数组第一个元素。
unshift()  在数组开头添加一或多个元素。
push()   向这个数组的末尾添加一个或多个元素。
pop()    删除数组最后一个元素。
splice()   对数组进行截取
sort()    对现有数组进行排序。
concat() 对数组进行拼接
reverse() 反转数组
join() 把数组链接成一个字符串

es6常用的一些方法

let/const ：
let和const属于块级作用域，也不存在变量提升；并在同一作用域不允许重复声明变量。

箭头函数:
不能通过new关键字调用； 不可以改变this的绑定

字符串：     
includes()以前在需要判断字符串中是否包含某些字符串的时候，都是用indexOf()的返回值来判断的；而现在可以使用            includes()来进行判断，会返回一个布尔值；
repeat() 之前需要重复字符串，我们需要自己封装一个函数,现在则只需要调用repeat()就可以了.

Promise:在 ES6 出现之前，处理异步函数主要是通过回调函数，虽然看起来也挺不错，但是用多之后就会发现嵌套太多回调函数回引起回调地狱,当我们有了 Promise 之后，就可以将这些转化成垂直代码.
Async Await:   async await可以用更少的处理实现 Promise 和 Generators 所实现的异步处理

for of 循环数组

深拷贝与浅拷贝：

浅拷贝就是会因拷贝者和被拷贝者的改变而改变；
而深拷贝就是拷贝者和被拷贝者发生改变的时候，两者毫不相干，相互不会受到影响。

vue：

简述虚拟DOM + diff算法

虚拟dom是利用js描述元素与元素的关系。
好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能

diff算法：基于虚拟DOM完成的的节点更新的方法
1、js对象来表示真实的DOM数结构，创建一个虚拟DOM对象；
2、当数据发生改变的时候，创建一个新的js的虚拟DOM对象；
3、比较新旧对象的差异，记录下来，最终更新到真实的DOM数结构上。

data为什么是个函数

是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

事件修饰符

.stop  阻止事件冒泡
.capture 设置事件捕获
.prevent 阻止默认事件
.once 事件只能触发一次

列举常用指令以及作用

v-cloak 解决差值表达式闪烁的问题
v-model 实现数据的双向绑定
v-for 可以循环遍历数据
v-if、v-show条件输出
v-html、v-text 解析输出变量
v-bind 给标签绑定属性 
v-on 给元素绑定事件  

vue的理解（原理）

他是一个MVVM模式的框架，然后vue是一个由数据驱动，组件化两大核心组成的框架。组件化就是封装可用的代码，提高代码的复用性。
Vue是一个提供了MVVM风格的双向数据绑定的 Javascript 库，专注于 View 层。它让开发者省去了操作 DOM 的过程，只需要改变数据即可。
特点:简洁、轻量、快速、数据驱动、组件化、模块友好。

vue双向绑定

vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。

ajax中的get和post的区别

 1、传参的方式
       get 是把参数拼接到 url后边
       post 是把请求参数放到请求体当中
 2、post方式要相对于get方式安全；get方式是有缓存的，post没有缓存

防抖节流以及使用场景

防抖就是指触发事件后在 n秒内函数只能执行一次，如果在 n秒内又触发了事件，则会重新计算函数执行时间。
节流就是指连续触发事件但是在 n秒 中只执行一次函数。可以用时间戳和定时器实现;

应用场景：
函数防抖：1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源；
        2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
函数节流：1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
        2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

Vue2和Vue3的区别？

TypeScript：vue3加入了TypeScript以及PWA的支持。
支持多个根标签：在vue2版本根标签只允许有一个，而在vue3可以存在多个根标签。

Git 常用命令

git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git checkout dev 切换到本地dev分支
git log 看你commit的日志

vue的生命周期：

1.创建
    beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
    created() 最早开始使用 data和methods中数据的钩子函数
2.挂载
    beforeMount() 指令解析完成，内存就已经生成了dom树，还没有渲染到本地
    mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数
3.更新
     beforeUpdate() 当data的数据发生改变才会执行这个钩子，但是DOM节点还未更新
     updated() 数据更新完成以后触发的方法，DOM节点已经更新
4.销毁
     beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
     destroyed()已经销毁完毕
     
第一次加载触发那几个函数
beforeCreate(),created(),beforeMount(),mounted()

路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？

vue-router全局有三个守卫：
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后
组件内的守卫：
beforeRouteEnter
beforeRouteUpdata
beforeRouteLeave

 to 即将要进入页面的路由信息
 from 离开页面路由信息
 next 是否继续进入进入路由  next(false)阻止进入  next()继续进入路由地址

vue路由传参的方式

路由传参就是点击一个按钮跳转到另外一个页面去 ，并将某个值传递过去。
第一种方法页面刷新数据不会丢失动态路由传递参数
{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }
在页面上面个可以通过this.$router.params.id来进行获取
    
第二种方法使用path来匹配路由 通过query来传递参数这种情况下query传递的参数会显示在url后面
methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }
页面中可以通过this.$router.query.id来获参数
组件中获取参数的是router

query、params可以传递一个也可以传递多个参数。
动态路由和query属性传值 页面刷新参数不会丢失， params会丢。

methods computed watch的区别

computed有缓存性，依赖属性值，只有属性发生改变的时候才会重新调用。使用场景购物车。
methods没有缓存的，只调用就会执行。
watch没有缓存性，监听属性，属性值只要发生变化就会执行。使用场景搜索框。

keep-alive的使用及详解

 概念:keep-alive 是 Vue 的内置组件，他可以用来保存我们路由切换时组件的状态。
 作用:在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

vue 中使用了哪些设计模式？

工厂模式 -单例模式 - 发布，订阅模式 - 观察者模式 - 装饰器模式 - 策略模式

typescript

typescript是一个JavaScript类型的一个超集，可以编译成JavaScript。
怎么使用？
1.通过node.js包安装，npm install -g typescript
2.编译一个typescript文件  tsc test.ts

组件通信

父传子:
在父组件中给子组件标签上绑定一个属性，属性上挂载需要传递的值;
在子组件通过props:[“自定义属性名”]来接收数据.
子传父:
在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法;
在子组件的方法通过this.$emit('自定义事件名')来调用这个方法.
兄弟互传:
先创建一个空的vue实例BUS，然后通过BUS.$emit传到空的vue实例中，在通过BUS.$on来接收数据.

vuex

vuex是什么：是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理程序所有组件的数据

介绍Vuex的核心概念及其作用：
1.state   所有的数据都存储在state中 state是一个对象
2、mutations 可以直接操作state中的数据
3、actions 只能调用mutations的方法
4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
5、modules 将仓库分模块存储

Vuex 页面刷新数据丢失怎么解决？

使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。

vuex如何异步修改状态

在actions里面调用mutations的方法

v-for的key属性的作用 和v-if的优先级？

在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识,给key赋值的内容不能是可变的;加上key之后可以提高渲染能力，也可以避免数据混乱的情况出现。

可以使用下标当做key，但是使用数组下标作为key值可能带来一些问题：
就是使用v-for把一个数组渲染到页面上，使用数组下标作为key值的时候，我们要点击一个复选框选中它，然后删除它，但是被选中的元素虽然删除了，但他后面的元素的复选框被自动选中了。

和v-if的优先级？
v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

什么是路由懒加载？

当打包的时候，js包会非常影响页面的加载，这个时候我们可以把不同的路由对应的不同的组件分割成不同的代码块 然后当路由被访问的时候 加载出对应的的组件，这样就更加高效了。
我们可以结合vue异步组件和webpack的代码分割功能，能够轻松实现理由懒加载。

v-if和v-show的区别及使用场景

区别：v-if是通过控制dom节点的存在与否来控制元素的显示；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏。
使用场景：如果是需要频繁的切换，用v-show比较好；如果在运行时条件很少改变，用v-if比较好

hash和history两种模式的区别

1.hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#.
2.hash 能兼容到IE8， history 能兼容到 IE10.
3.他们的原理也不同：
  history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化
  hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

vue 响应式原理

当你把一个普通的 js 对象传给 Vue 实例的 data 选项，Vue 就会遍历这个对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
拦截器分为请求拦截器和响应拦截器

请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。

响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

ajax的通信原理

ajax通信实质上是JavaScript创建了一个XMLHTTPrequest对象这个对象有open（）方法其参数包含url method callback通过这个方法设置其属性然后通过send()向后台发送请求数据的请求 

微信小程序

微信小程序跳转方式

wx.navigateTo
wx.switchTab
wx.navigateBack
wx.relaunch

小程序的生命周期

应用的生命周期：
1.  onLauch 是小程序的生命周期函监听小程序初始化  当小程序初始化完成之后 会触发一次onLaunch （全局只触发一次）
2.  onShow 监听小程序的显示 当小程序启动时 或从后台前台显示 会触发onShow
3.  onHide 监听小程序的隐藏 当小程序从前台进入后台会触发onHide

页面的生命周期：
data             object           页面的初始数据
onLoad           function         生命周期函数监听页面加载
onReady          function         生命周期函数 监听页面初次渲染完成
onShow           function         生命周期函数监听页面的显示
onHide           function         生命周期函数监听页面隐藏
onUpload         function         生命周期函数--监听页面卸载

1、小程序注册完成后，加载页面，触发 onLoad 方法。
 2、页面载入后触发 onShow 方法，显示页面。
 3、首次显示页面，会触发 onReady 方法，渲染页面元素和样式，一个页面只会调用一次。
 4、当小程序后台运行或跳转到其他页面时，触发 onHide 方法。
 5、当小程序有后台进入到前台运行或重新进入页面时，触发 onShow 方法。
 6、当使用重定向方法 wx.redirectTo(OBJECT) 或关闭当前页返回上一页 wx.navigateBack()，触发 onUnload。
 
 生命周期函数

1、onLoad: 页面加载。
 a、一个页面只会调用一次。
 b、参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
2、onShow: 页面显示。
 a、每次打开页面都会调用一次。
3、onReady: 页面初次渲染完成。
 a、一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
 b、对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
4、onHide: 页面隐藏。
 a、当navigateTo或底部tab切换时调用。
5、onUnload: 页面卸载。
 a、当redirectTo或navigateBack的时候调用