yarn与npm什么区别？
速度快主要来自以下两个方面:并行安装:无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。离线模式:如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了
1 npm下载的时候是同步下载的 npm不会有缓存 npm会将依赖的版本号进行锁定
2 yarn下载的时候是异步下载的 yarn会有缓存 yarn会将依赖的版本号进行锁定
pc端有哪些布局？
自适应布局
**布局特点：**不同分辨率下，页面元素位置变化，大小不变
**实现方法:**针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式
**缺点：**IE8及以下不支持媒体查询；只能兼容主流分辨率
流式布局（百分比布局）
**布局特点：**不同的分辨率下显示相同的排版；高度固定，宽度自适应
**实现方法:**网页中主要区域的尺寸使用百分比；
**缺点：**大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调
经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应
弹性布局（rem/em布局）：
**布局特点：**页面元素宽度，高度，字体大小会跟着屏幕大小缩放
**实现方法:**使用js监听当前屏幕大小，设置html的字体大小
**缺点：**IE678不兼容；需要计算；
响应式布局：
**布局特点：**每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果
**实现方法：**媒体查询+流式布局
**优点：**适应pc和移动端
**缺点：**要匹配足够多的屏幕大小，工作量大，设计也需要多个版本
什么叫业务模块与功能模块有什么区别
功能模块 就是可以复用
注册的时候怎么获取手机号验证码？
请求数据，axios 设置定时器
同步和异步的理解
同步就是一个请求只有等响应完，才能进行下一步操作(代码从上往下执行顺序)
异步就是一个请求在等响应期间，可以进行下一步操作
css有几种定位方式？并解释其意思
静态定位（static）表示按照正常定位方案，元素盒按照在文档流中出现的顺序依次格式化；
相对定位（relative）将移动元素盒，但是它在文档流中的原始空间会保留下来；
绝对定位（absolute）是指元素盒彻底从文档流中脱离出来，并相对于其容器块进行定位。因为这些元素从文档流中脱离出来，所以它们不再影响周边元素的布局，并且它们占据的空间不被保存；
固定定位（fixed）与绝对定位类似，元素从文档流中脱离，但是它们不是相对于容器块定位，而是相对于视口（viewpoint）定位（大多数情况下，这个视口就是指浏览器窗口）。
rem与em的区别
em相对于父元素，rem相对于根元素
css属性有哪些？ 哪些可以继承？CSS3新增的伪类有哪些
1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
伪类选择器 :first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-of-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector)
常用来测试的浏览器有哪几种 什么内核?
a、 IE(IE浏览器) : trident 内核 -ms-
b、 Firefox(火狐浏览器) ： gecko 内核 -moz-
c、 Safari(苹果浏览器) ：webkit 内核 -webkit-
d、 Opera(欧朋浏览器)：以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核 -o-
e、 Chrome(谷歌浏览器)：Blink(基于 webkit ， Google 与 Opera Software 共同开发 ) -webkit-
图片懒加载的原理
原理：
先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等
var let const在什么场景下会用?
var 在var中，你可以重新声明并重新分配 (全局作用域) 有变量提升
let let中禁止重新声明 (变量) （有块级作用域 没有变量提升）暂时性死区 全局变量不会挂在顶层对象下面
const 在const中，禁止重新声明和重新分配。 (常量) （有块级作用域 没有变量提升）暂时性死区 全局变量不会挂在顶层对象下面 一旦声明，必须马上赋值
let、const使用场景
-
let使用场景：变量，用以替代var。 -
const使用场景：常量、声明匿名函数、箭头函数的时候
路由传参
第一种*获取参数的方法是 this.$route.params.id
第二种 path+query;query传递的参数会通过？id = xxx展示
获取参数的方法是 this.$route.query.id
vue传参方式有：query、params+动态路由传参
vuex有哪些属性?
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
(1)state：存储基本数据 (2)getter： 从state基本数据派生出的数据，只能同步 (3)mutation：提交更改数据的方法，只能同步 (4)action：请求API方法获取后台数据，然后可以回调函数提交mutaions方法更改state数据状态，可以异步 (5)module：模块化Vuex
垂直水平居中的实现方式有哪些？
父级设置text-align: center和line-height等同高度。
子节点绝对定位，设置position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
子节点绝对定位，需要设置宽度和高度。设置position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;
父级设置display: table，子节点设置display:table-cell;text-align:center;vertical-align:middle;
父级设置display: flex;justify-content:center;align-items:center;
父节点设置display: grid;，子节点设置：align-self:center;justify-self: center;
数组去重？
function unique(arr) { return [...new Set(arr)];}function unique(arr) { return arr.filter((v, i, a) => { return a.indexOf(v) === i; })}function unique(arr) { const tmp = new Map(); return arr.filter(v => { return !tmp.has(v) && tmp.set(v); })}
问：什么是跨域？
也就浏览器的同源策略，出于安全的考虑，只要是协议、域名、端口有一个不同就算是跨域，ajax请求就会失败。浏览器有同源策略主要是为了防止CSRF攻击，防止利用户的登录状态发起恶意请求。
问：你知道的解决跨域的方式有几种？
JSONP: 利用script标签不受同源策略限制，具体可以参考40行封装一个jsonp包。
CORS：使用自定义的HTTP头部让浏览器和服务器进行沟通，实现CORS的关键是后端，服务端设置Access-Control-Allow-Origin就可以开启，表示哪些域名可以访问资源。
document.domain：当二级域名相同时，例如a.test.html和b.test.html，只需要给两个页面都设置document.domain = 'test.html'，就可以实现跨域。
postMessage：如a.html页面通过iframe嵌入了b.html页面，其中一个可以通过postMessage方法发送信息，另一页面通过监听message事件判断来源并接受消息。
几种前端储存以及它们之间的区别
cookies： HTML5之前本地储存的主要方式，大小只有4k，HTTP请求头会自动带上cookie，兼容性好
localStorage：HTML5新特性，持久性存储，即使页面关闭也不会被清除，以键值对的方式存储，大小为5M
sessionStorage：HTML5新特性，操作及大小同localStorage，和localStorage的区别在于sessionStorage在选项卡(页面)被关闭时即清除，且不同选项卡之间的sessionStorage不互通
IndexedDB： NoSQL型数据库，类比MongoDB，使用键值对进行储存，异步操作数据库，支持事务，储存空间可以在250MB以上，但是IndexedDB受同源策略限制
Web SQL：是在浏览器上模拟的关系型数据库，开发者可以通过SQL语句来操作Web SQL，是HTML5以外一套独立的规范，兼容性差
为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使用模板内容更加简洁
计算属性与方法的区别？
计算属性是基于它们的依赖进行缓存的
方法不存在缓存
Vue的生命周期可以分为以下八个阶段：
beforeCreate 实例创建前
created 实例创建完成
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新完成
beforeDestory 销毁前
destoryed 销毁完成
1.beforeCreate
这个钩子是new Vue()之后触发的第一个钩子，在当前阶段中data、methods、computed以及watch上的数据和方法均不能被访问。
2.created
这个钩子在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果你非要想，可以通过vm.$nextTick来访问Dom。
3.beforeMount
这个钩子发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
4.mounted
这个钩子在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。也可以向后台发送请求，拿到返回数据。
5.beforeUpdate
这个钩子发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
6.updated
这个钩子发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
7.beforeDestroy
这个钩子发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
8.destroyed
这个钩子发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
this 的指向有哪些？
1、普通函数中的this指向window
2、定时器中的this指向window
3、箭头函数没有this,它的this指向取决于外部环境、
4、事件中的this指向事件的调用者
5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象
6、类 class中的this 指向由constructor构造器new出来的实例对象
7、自调用函数中的this 指向window
ES6新特性
const 与 let以及var 箭头函数 Promise module模块化
字符串模板 指数操作符 for ... of循环 解构赋值 扩展运算符 剩余运算符 类 includes
注册自定义指令
Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以是一个指令函数。
存储方式
cookies： HTML5之前本地储存的主要方式，大小只有4k，HTTP请求头会自动带上cookie，兼容性好
localStorage：HTML5新特性，持久性存储，即使页面关闭也不会被清除，以键值对的方式存储，大小为5M
sessionStorage：HTML5新特性，操作及大小同localStorage，和localStorage的区别在于sessionStorage在选项卡(页面)被关闭时即清除，且不同选项卡之间的sessionStorage不互通
什么叫模块化开发？
模块化思想只是封装好的模块对外提供接口。使用时require进来。require进来后，调用各个接口。感觉AMD规范和CMD规范只是加载模块的时机不同，语法不同而已。至于将模块引进来后模块做了什么，那就是模块本身的内容了
所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
Axios有哪些功能？
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF
axios拦截器的实现
到这里对于axios的大概就了解的差不多了，axios支持自定义配置，支持get等api，其实最终都是调用原型上的Axios.prototype.request方法，这个方法会对传入的参数进行混合。 axios对于浏览器基于Promise创建了XmlHttpReques对象，成功失败返回的是Promise，所以我们可以调用.then方法接收返回值。 对于请求拦截响应拦截，当使用拦截的.use的时候传入了成功和失败的回调方法，在axios调用request放发的时候，会创建个数组，chain=[dispatchRequest,undefined] 把请求拦截放在dispatchRequest前面，响应拦截放在undifined后面，然后按照顺序循环调用每次取出两个，对应传入的成功回调，和失败回调，这个数组保证了，请求拦截和响应拦截的顺序。 对于取消请求在创建axios的时候传入了取消的对象cancelToken，这个对象创建了一个promise并向外暴露了一个取消方法，当调用这个取消方法的时候，会把这个promise状态设置为成功，当成功的时候，会在xhr文件里调用 取消请求的 request.abort()方法。
token的验证机制是怎样的？
验证过程：
· 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端；
· 前端拿到后端返回的 token ,存储在 localStroage 和 Vuex 里；
· 前端每次路由跳转，判断 localStroage 有无 token ，没有则跳转到登录页，有则请求获取用户信息，改变登录状态；
· 每次请求接口，在 Axios 请求头里携带 token;
· 后端接口判断请求头有无 token，没有或者 token 过期，返回401；
· 前端得到 401 状态码，重定向到登录页面
在vue-cli项目实现登录的过程中用到了token验证，总结如下： \1. 客户端以用户名与密码为参数请求登录API
\2. 服务端收到登录请求去验证用户名与密码
\3. 验证通过,服务端会生成Token,再把这个Token响应给客户端.
\4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们选择了cookie
\5. 客户端每次向服务器请求API接口时,都要带上Token.可以和后端协定，传参数还是headers
\6. 客户端每次跳转路由的时候也要验证Token登录态
\7. 服务端收到请求,验证Token,如果通过就返回数据,否则返回错误状态，客户端依次去处理
