一.什么是seo优化
1、SEO是搜索引擎优化的（Search Engine Optimization）英文缩写。是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的预期目标。
二.img的title和alt的区别
alt在图片无法加载的时候才会显示,title是在图片加载正常之后,鼠标移动上去之后显示的值
三.行内元素和块元素
块元素：每个块级元素通常都会独占⼀⾏或者是多⾏，可以对其单独设置⾼度,宽度以及对齐等属性。
块级元素的特点： 块级元素会独占⼀⾏ ⾼度，⾏⾼，外边距和内边距都可以单独设置 宽度默认是容器的100% 可以容纳内联元素和其他的块级元素
行内元素：不占有独⽴的区域，仅仅依靠⾃⼰的字体⼤⼩或者是图像⼤⼩元素（内联元素）：不占有独⽴的区域，仅仅依靠⾃⼰的字体⼤⼩或者是图像⼤⼩来⽀撑结构。⼀般不可以设置宽度，⾼度以及对齐等 属性。
⾏内元素的特点： 和相邻的⾏内元素在⼀⾏上 ⾼度和宽度⽆效，但是⽔平⽅向上的padding和margin可以设置，垂直⽅向上的⽆效 默认的宽度就是它本⾝的宽度 ⾏内元素只能容纳纯⽂本或者是其他的⾏内元素（a标签除外）
行内块元素的特点：和相邻的⾏内元素（⾏内块）在⼀⾏上，但是中间会有空⽩的间隙 默认的宽度就是本⾝内容的宽度 ⾼度，⾏⾼，内边距和外边距都可以设置
四、媒体查询的使用方式：
，⾸先要通过
来声明⼀个媒体查询；然后通过
来规定媒体的类型，这⾥的类型包含 all（所有设备）、
@media
mediatype
print（打印机）、screen（电脑屏幕、平板电脑、智能⼿机）、speech（屏幕阅读器）；接着就是括号内的媒体特性，这个特征的写法和CSS
类似，都是属性名：属性值（min-width: 700px) ；最后打括号⾥的就是CSS样式了。在使⽤媒体查询时，⼀定要保证媒体查询的位置要放在CSS样式的最后⾯。这是因为为元素设置CSS样式时，假如与媒体查询中的样式是相同属性时，下⾯的CSS样式会覆盖上⾯的CSS样式，如果不将媒体查询放在最后，它的样式将不会⽣效。
即：
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.
border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.
border { border: 0.333333px solid #999 }
}
五：src和href之间的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
六：css让元素看不到的方法
1.使用flex布局中的display：none；此方法可以隐藏元素且不占位但是它会导致浏览器的重排和重绘。
2、visibility:hidden; visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览器重绘而不会重排。
3、opacity:0; opacity翻译成中文是透明度、不透明的意思；将opacity的属性改成0那就是透明度等于0看不见元素，但是这种方法也是只能隐藏看不见元素，和visibility:hidden一样，元素依然存在页面中。
4、position； 利用定位将元素的top和left值设为足够大的负数，使它移出屏幕在屏幕上看不见。
5、overflow:hidden； overflow翻译成中文是漫出、溢出的意思；将overflow的属性设置hidden可以实现元素隐藏，但是这个是超出盒子的部分隐藏，有局限性。
七、重绘和回流
重绘：DOM树没有元素增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘
回流：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
它们的区别是：DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流。即： 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
八、new操作符具体干了什么？
1.创建了一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
2.属性和方法被加入到this引用的对象中
3.新创建的对象由this所引用，并且最后隐式的返回this
九.ajax的原理
1、Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新
2、Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
3、这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解
总结：我们可以看出，XMLHttpRequest对象完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面
十.常见的设计模式有那些
常见的设计模式有单例模式和观察者模式
单例模式：就是保证一个类只有一个实例，实现的方法一般是先判断实例存
在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类
只有一个实例对象。在 JavaScript 里，单例作为一个命名空间提供者，从全
局命名空间里提供一个唯一的访问点来访问该对象。
观察者模式: 观察者的使用场合就是：当一个对象的改变需要同时改变
其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用
观察者模式。
总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽
象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化
十一.对promise的理解
1、Promise是一个构造函数，可以通过 new Promise()得到一个 Promise 的实例；
2、在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数） ；
3、在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到这个 .then() 方法 ；
4、Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
5.、既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者； 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者； 6、由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来将成功 或 失败的结果，返回给调用者；
7、我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】为 这个 Promise 异步操作，指定成功（resolve） 和 失败（reject） 回调函数；
**十二.**js的数据类型有那些
js的数据类型分为：基本数据类型和复杂数据类型
基本数据类型：number、boolean，null、undefined，string，sybol
复杂数据类型：Function、object
十三.js的内存存储方式
内存分为2种：
栈内存： 存储的是基本类型 基本数据类型：number、boolean，null、undefined，string，sybol
堆内存： 存储的是引用类型 复杂数据类型：Function、object
十四.js里如何判断是不是一个数组
1.用instanceof方法
instanceof运算符是用来测试一个对象是否在其原型链原型构造函数的属性
var arr=[]
arr instanceof Array//true
2.用constructor方法
constructor属性返回对创建此对象的数组函数的调用，就是返回对象相对应的构造函数
var arr=[]
arr.constructor==Array//true
3.jQuery方法
Object.prototype.toString.call(value)=='[object Array]'
利用这种方法，可以写一个返回数据类型的方法
var isType=function(obj){
return Object.prototype.toString.call(obj).slice(8,-1)
}
4.用es5的新方法isArray()
var a=new Array(123)
var b=new Date()
console.log(Array.isArray(a))//true
console.log(Array.isArray(b))//false
十五.map和foreach的区别
map:主要在对数组的进行复杂逻辑处理时用的多，特别是 react 中 遍历数据，也经常用到，写法和 forEach 类似 forEach:这个方法是为了取代 for 循环遍历数组的，返回值为 undefined
十六.vue2的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅模式的方式，即其核心主要利用 ES5 中的 Object.defineProperty 来劫持各个属性的setter，getter，在数据变动是发布消息给订阅者，触发响应的监听回调
十七.数组去重的方法
1.用es6中的new Set()方法
var arr=[8,58,5,5,5,45,21,5,2,4,5,1,5,2,,455,1,5]
console.log(...new Set(arr))
2.使用双重for循环方法去重
//数组去重
function disTinct(arr) {
var ans = []
for (var i = arr.length - 1; i >= 0; i--) {
var nb = 0 //没重复为0.有重复不为0
for (var j = i - 1; j >= 0; j--) {
if (arr[i] == arr[j]) {
nb = 1
break
}
}
if (nb == 0) {
ans.unshift(arr[i])
}
}
return ans
}
3.用for循环+indexOf方法去重
//数组去重(indexOf)
function unique(arr) {
var res = []
for (var i = 0; i < arr.length; i++) {
if (res.indexOf(arr[i]) == -1) {
res.push(arr[i])
}
}
return res
}
4.用filter方法去重
var arr = [1, 1, 8, 8, 12, 12, 15, 15, 16, 16];
function unlink(arr) {
return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
console.log(unlink(arr));
我常用的就这几种了
十八.防抖和节流
防抖： 一个函数连续多次触发，我们只执行最后一次。
一个按钮被点击时，会发送网络请求。为了防止用户无意多次点击，或有人恶意连续发送请求，我们不希望按钮连续被点击时，每次都发送网络请求。而是过一定时间没有再点击时，我们才发送请求---即只执行最后一次---便是防抖。
// fn是要节流的函数，wait是时间间隔，默认500毫秒
const myDebounce = (fn, wait = 500) => {
// 缓存一个定时器
let timer = null
// 使用闭包（这样节流函数复用时，不会相互影响，且不污染全局变量）
return function( ...args ) { // ES6剩余参数收集参数
// 如果在500毫秒内再次触发，即timer存在，此时清除掉这个timer
// 这里实现了执行只最后一次
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args) // 利用apply绑定this，同时展开args数组并传参
}, wait)
}
}
节流： 一个函数连续多次触发，我们按照一定的时间间隔多次执行。
滚动事件中会触发网络请求，但是我们不希望在滚动时一直发送网络请求，而是隔一定时间发起一次---便是节流。
// fn是要节流的函数，wait是时间间隔，默认500毫秒
const myThrottle = (fn, wait = 500) => {
// 缓存一个定时器
let timer
// 使用闭包（这样节流函数复用时，不会相互影响）
return function( ...args ) {
// 如果在500毫秒内再次触发，即timer存在，此时return，等待这个timer执行完毕。
// 这里实现了时间间隔
if (timer) return
// 这里表示第一次触发，或是上一个timer执行完毕。就可以重新开启一个定时器。
timer = setTimeout(() => {
fn.apply(this, args)
timer = null
}, wait)
}
}
十九.apply、call和bind的区别
call、apply和bind他们的主要作用都是改变this的指向，但在使用上略有区别
call和apply的主要区别主要是在传递的参数上有所不同，call后面传递的参数是以逗号的形式隔开，apply传递的参数则是数组的形式，而bind返回的是一个函数形式，如果要执行，就需要在它的后面再叫一个小括号，而且bind的参数只能用逗号的形式隔开，不能是数组形式
二十.this的指向
1.在普通函数：在普通函数进行指向调用时.谁调用的我.this 就指向的谁?
2.在箭头函数：在箭头函数指向定义时.定义的时候 this 就确定 了.指向它的外层.
二十一.判断js的数据类型
1.使用typeof判断
typeof 1 //number
typeof 'a' //string
typeof true //boolean
typeof undefined //undefined
typeof null //object
typeof {} //object
typeof [1,2,3] //object
function Fn(){}
typeof new Fn() //object
typeof new Array() //object
2.用instanceof判断
console.log('数据类型判断 - constructor');
let num = 23;
let date = new Date();
let str = "biu~";
let reg = new RegExp();
let bool = true;
let fn = function () {
console.log(886);
};
let udf = undefined;
let nul = null;
let array = [1, 2, 3];
console.log(num.constructor); // [Function: Number]
console.log(date.constructor); // [Function: Date]
console.log(str.constructor); // [Function: String]
console.log(bool.constructor); // [Function: Boolean]
console.log(fn.constructor); // [Function: Function]
console.log(reg.constructor); // [Function: RegExp]
console.log(array.constructor); // [Function: Array]
3.用constructor判断
console.log('数据类型判断 - constructor');
let num = 23;
let date = new Date();
let str = "biu~";
let reg = new RegExp();
let bool = true;
let fn = function () {
console.log(886);
};
let udf = undefined;
let nul = null;
let array = [1, 2, 3];
console.log(num.constructor); // [Function: Number]
console.log(date.constructor); // [Function: Date]
console.log(str.constructor); // [Function: String]
console.log(bool.constructor); // [Function: Boolean]
console.log(fn.constructor); // [Function: Function]
console.log(reg.constructor); // [Function: RegExp]
console.log(array.constructor); // [Function: Array]
4.通过Object下的toString.call()方法判断
Object.prototype.toString.call();
console.log(toString.call(123)); //[object Number]
console.log(toString.call('123')); //[object String]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call({})); //[object Object]
console.log(toString.call([])); //[object Array]
console.log(toString.call(function(){})); //[object Function
5.通过用jquery提供的一系列工具判断
即
jQuery.isArray();是否为数组
jQuery.isEmptyObject();是否为空对象 （不含可枚举属性）。
jQuery.isFunction():是否为函数
jQuery.isNumberic():是否为数字
jQuery.isPlainObject():是否为使⽤“{}”或“new Object”⽣成对象，⽽不是浏览器原⽣提供的对象。
jQuery.isWindow(): 是否为window对象；
jQuery.isXMLDoc(): 判断⼀个DOM节点是否处于XML⽂档中。
二十二、对eventloop的理解
eventloop是js的一个底层运行原理，js是单线程的，但是也有一些耗时的任务，影响代码执行的效率，因为代码都在主线程中执行，所以当遇到一些耗时的任务时，会单独开启异步线程，将耗时的任务推入异步队列中等待执行，然后当主线程中的任务都执行完毕之后，会再到异步队列中取出第一个到主线程中执行，执行完之后在到异步队列中取第二个，以此类推这个来回取的过程应该就叫做事件循环(eventLoop)
二十三、常见的跨域方式
1、第一种是通过jsonp的方式 jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口 地址，然后传递 callback 参数，后端接收 callback，后端经过 数据处理，返回 callback 函数调用的形式，callback 中的参数 就是 json
2.第二种是通过代理的方式
前端代理我在 vue 中使用那个 vue.config.js 里面配置一个 proxy,里面有个 target 属性指向跨域链接.修改完重启项目就可 以了.实际上就是启动了一个代理服务器.绕开同源策略,在请求 的时候,通过代理服务器获取到数据再转给浏览器
3、是通过CORS方式
CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达 到前端跨域请求的
二十四、存储方式浏览器
存储方式大概有三种 第一种是cookie存储，这类存储只能保存一段不超过4k的文本信息，通常是用来保存我们所浏览的网址之类的。可以通过浏览器的历史记录进行查看。
第二种则是session存储，通俗来讲就类似于网页微博之类的密码保存。在你关闭网页后，再次打开，所存储的内容便会消失。 第三种则是localstorage存储，这类存储类似于我们生活中经常用到的下载，比如说我们电脑、手机上面的软件、应用等。这类存储的好处是可以永久保存
二十五、浏览器的缓存策略
浏览器的缓存过程如下：
**1. 开始加载，域名解析，DNS缓存
**2. 本地缓存（memory缓存）
3. Http缓存（强缓存和协商缓存）
4. 服务端缓存（cdn缓存）
DNS缓存：浏览器在第一次获取到IP地址后，会将其缓存起来。下次相同域名再次发起请求时，浏览器会先查找本地缓存，如果缓存有效，则会直接返回该IP地址，否则会继续开始寻址之旅。
memory缓存：资源缓存到内存中，memory cache 只是个“短期存储”。当数据量过大，即使网页不关闭，缓存依然会失效。memory cache 机制保证了一个页面中如果有两个相同的请求 (例如两个 src 相同的 ，两个 href 相同的 )都实际只会被请求最多一次，避免浪费。
HTTP缓存，分为强制缓存和协商缓存
对于强缓存，控制字段为Expires和Cache-Control，其中Cache-Control优先级比Expires高。浏览器再向服务器请求资源时,首先判断是否命中强缓存,再判断是否命中协商缓存!
强缓存：Expires该字段是 http1.0 时的规范，它的值为一个绝对时间的 GMT 格式的时间字符串，比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这个资源的失效时间，在此时间之前，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。
协商缓存：一旦发现缓存无效，它并不会简单的把缓存删除，而是抱着一丝希望，想问问服务器，我这个缓存还能继续使用吗？这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match.
Last-Modify/If-Modify-Since 浏览器第一次请求一个资源的时候，服务器返回的 header 中会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间。当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。如果命中缓存，则返回 304，并且不会返回资源内容，并且不会返回 Last-Modify。
缺点:短时间内资源发生了改变，Last-Modified 并不会发生变化。周期性变化。如果这个资源在一个周期内修改回原来的样子了，我们认为是可以使用缓存的，但是 Last-Modified 可不这样认为,因此便有了 ETag。Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存
总结
当浏览器再次访问一个已经访问过的资源时，它会这样做：
1.根据相关字段判断是否命中强缓存，如果命中，就直接使用缓存了。
2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
4.否则，返回最新的资源。
二十六、vue2的生命周期
vue2的生命周期主要分为4个阶段即：创建、挂载、更新、销毁
创建之前 beforeCreate() {},
创建之后 created() {},
挂载之前 beforeMount() {},
挂载之后 mounted() {},
更新之前 beforeUpdate() {},
更新之后 updated() {},
销毁之前 beforeDestroy() {},
销毁之后 destroyed() {},
二十七、http常见的状态码
1xx（临时响应） 表示临时响应并需要请求者继续执行操作的状态代码 2xx （成功） 表示成功处理了请求的状态码。 常见的 2 开头的状态码有：200 – 服务器成功返回网页 204 No content ，表示请求成功，但响应报文不含实体的主体部分 205 Reset Content ，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容 206 Partial Content ，进行范围请求 3xx （重定向） 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向 常见的 3 字开头的状态码有： 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应 时，会自动将请求者转到新位置。 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应 继续使用原有位置来进行以后的请求。 304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 307 temporary redirect ，临时重定向，和 302 含义类似，但是期望客户端保持请求方法不变向新的地址发出请求 4xx（请求错误） 这些状态代码表示请求可能出错，妨碍了服务器的处理。 常见的 4 字开头的状态有：404 – 请求的网页不存在 401 unauthorized ，表示发送的请求需要有通过 HTTP 认证的认证信息 403 forbidden ，表示对请求资源的访问被服务器拒绝 404 not found ，表示在服务器上没有找到请求的资源 5xx（服务器错误） 这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。 常见的以 5 开头的状态码有： 500 （服务器内部错误） 表示服务器端在执行请求时发生了错误 501 Not Implemented ，表示服务器不支持当前请求所需要的某个功能 503 （服务不可用） 表明服务器暂时处于超负载或正在停机维护，无法处理请求
二十八、标准盒子模型和怪异盒子模型
使用标准盒子模型时，盒子的宽高不会因为第一次的设定而持久不变，还可以通过padding值的设定来进行二次放大； 使用怪异盒子模型时，宽高在第一次设定时就已经固定，不会因为后期padding值的设定而放大，只会相对应的调整内容的位置
二十九、如何清除浮动
1.第一种使用clear：both；
2.第二种使用clear：left；
3.第三种使用clear：right；
三十、es6新增的语法
新增的语法有：let/const,箭头函数，模板字符串，解构赋值，模块的导入(import)和导出(export default/export),Promise等等
三十一、vue字符组件传值
vue字符组件传值：一共大约有三种
第一种是：父传子：主要通过 props 来实现的
具体实现：父组件通过 import 引入子组件，并注册，在子组件标签 上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收
第二种：子传父：主要通过$emit 来实现
具体实现：子组件通过通过绑定事件触发函数，在其中设置 this.emit 中有两个参数一是要派发的自定义事件，第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的 methods 中的方法接受的默认值,就是传递过来的参数
第三种：兄弟之间传值有两种方法：
方法一：通过 event bus 实现
具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的 bus，在组件 A 中通过bus.on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据
方法二：通过 vuex 实现
具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters和 modules 5个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到mutations，mutations 再通过逻辑操作改变 state，从而同 步到组件，更新其数据状态
三十二、cookie、sessionStorage、localStorage
cookie 可以设置失效时间，但没有自己的存取取的方法，需要时封装，每次请求时跟随请求发送,而 localStorage和sessionStorage 可以有自己存取的方法例：setItem(),getItem(),removeItem(),clear() 如：
localStorage.setItem(‘属性’，值)
而且cookie一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭浏览器端后失效，它的存放数据的大小为4k每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题，还需要程序员自己封装，源生的cookie接口不友好
localStorage在存入浏览器中后除非被消除，否则的话就永久保存，sessionStorage则与其相反仅在当前会话下有效，关闭页面或浏览器后会被清除，localStorage和sessionStorage的存放数据大小一般为5MB，都仅在客户端(即浏览器端)中保存，不参与和服务器的通信，并且他们都可以接受源生接口，亦可以再次封装来对Object和Array有更好的支持
三十三、let、var和const的区别
var是定以在window下相当于全局作用域在任何地方都能够调用，访问到
而let、和const则没有定义在window下相当于一个局部作用域只能在特定的范围内才能访问到
var有变量提升，没有暂时性死区，可以在定义之前调用，且不会报错，返回值是undefined即：
console.log(a)//undefined
var ar=2
而let和const没有变量提升，且有暂时性死区，不能够在定义之前调用否则的的话会报错即：
console.log(a)//Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(b)//Uncaught ReferenceError: Cannot access 'a' before initialization
let a=1
const b=2
var和let声明和可以暂时不赋值，而const声明后就必须赋值否则就会报错 var和let的值可以在声明之后任意修改，而const则不可以
三十四、computed和watch的区别
computed:是vue独有的特性计算属性，可以对data中的依赖项再重新计算，得到一个新值，应用到视图中，和 methods 本质区别是 computed 是可缓存的， 也就是说computed 中的依赖项没有变化，则computed中的值就不会重新计算，而methods中的函数是没有缓存的。Watch 是监听 data 和计算属性中的新旧变化。
三十五、vue3常用的api
常用的api大概有：1. setup、2. reactive、3. ref、4. toRef、5. toRefs、6. shallowReactive、7. shallowRef、8. toRaw、9. markRaw、10. provide&inject、11. watch&watchEffect、12. computed、13. useStore、14. useRouter、15. getCurrentInstance、16. 元素ref属性
三十六、js常见的创建方式
- 直接对象字面量
const obj = {
name: 'dz',
age: 23
}
1234
2.## 通过new Object()创建对象
'use strict';
// 使用 new Object() 创建对象
var o = new Object();
o.name = "zhangsna";
o.sayName = function(){
alert(this.name);
}
o.sayName();
alert('o instanceof Object>>>>>>>>>>>'+(o instanceof Object));//true
alert("typeof o >>>>> "+typeof o);//object
- 通过
{}创建对象
'use strict'; //使用strict模式
/**
使用{}创建对象，等同于 new Object();
**/
var o = {};
o.name = 'jack';
o.age = 20;
o.sayName = function(){
alert(this.name);
}
alert(o.name+'-'+o.age);
o.sayName();
三十七、==和===的区别
对于 == 来说，如果对比双方的类型不一样的话，就会进行类型转换 即：假如我们需要对比 x 和 y 是否相同，就会进行如下判断流程
- 首先会判断两者类型是否相同。相同的话就是比大小了
- 类型不相同的话，那么就会进行类型转换
- 会先判断是否在对比 null 和 undefined ，是的话就会返回 true
- 判断两者类型是否为 string 和 number ，是的话就会将字符串转换为 number
1=='1'
↓
1==1
- 判断其中一方是否为 boolean ，是的话就会把 boolean 转为 number 再进行判断
'1' == true
↓
'1' == 1
↓
1 == 1
- 判断其中一方是否为 object 且另一方为 string 、 number 或者 symbol ，是的话就 会把 object 转为原始类型再进行判断
'1' == { name: 'yck' }
↓
'1' == '[object Object]'
对于 === 来说就简单多了，就是判断两者类型和值是否相同，而没有以上的各种的隐式转换方式
三十八、阻止冒泡的方式
1.第一种可以在添加的绑定事件的类型后面添加一个.stop即
<div @click.stop="clickitem">点击</div>
2.第二种则是是在调用的函数内部用event.stopPropagation()阻止冒泡也可以写成e.stopPropagation()即：
function applay(e){
e.stopPropagation()
}
function applay(event){
event.stopPropagation()
}
第三种则使用
三十九、http请求方法有那些
方法大概有：GET方法、POST方法、HEAD方法、PUT方法、DELETE方法、CONNECT方法、OPTIONS方法、TRACE方法。
四十、rem和em的区别
rem和em都是相对单位，主要是参考的标签不同：
-
rem是根据根节点，即相对于标签的font-size实现的，浏览器磨人的字号为font-size:16px
-
em是根据父节点的标签的字号，和百分比%类似，%也是相对于父级的，只不过%是相对于父级宽度的，而em则是相对于父级字号的
四十一、实现一个div上下左右居中的三种方法
大概有四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
</div>
</body>
</html>
第一种：使用margin：0 auto；
div{
margin：0 auto；
}
第二种：使用固定定位的方式即：
*{
position: absolute;
left: 50%;
top: 50%;
}
第三种：则是使用相对于自身定位的方式即：
div{
position: relative;
left: -50%;
top: -50%;
}
第四种：则是使用flex布局的方式即：
html{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
div{
width: 100px;
height: 100px;
background: red;
}
四十二、v-for和v-if的区别
-
v-for是用来遍历数组的渲染数据的
-
v-if是用来判断条件是否为真的 即：v-if在条件不满足的时候直接从dom数消失，v-show行间样式变成display:none，且当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
四十三、router传参的方式
我知道的大概有三种
一种params方式传参即：
//用这种方法传参，必须这么些，不能写path,否则你在取参数的时候this.$router.params.userId就是undefined.这是因为，params只能用name来引入路由，
this.$router.push({
name:"'Message'",//这个name就是你刚刚配置在router里边的name
params:{
userId:"10011"
}
})
另一种是query方式传参即：
this.$router.push({
path:"/login",//这个path就是你在router/index.js里边配置的路径
query:{
userId:"10011"
}
})
第三种：就是使用vue里的标签来传递参数即：
<router-link target="_blank"
:to="{path:'/login',query:{userId: "33333"}}">
</router-link>
或者使用name的方法传参
同样，这种方法也需要在router/index.js里边配置每个页面的路径，name属性
name:'Message', //就是要在路由配置里边配置这个属性，用来知道你要跳转到那个页面的名字
<router-link :to="{name:''Message'',params:{userId:'1234'}}">Hi页面1</router-link>
四十四、v-if和v-show的区别
v-if在条件为true时，才加载相对应的元素，为false时则不加载相对应的元素
而v-show无论条件是否为true都加载相对应的元素，只是在返回的条件为true时改变display，css中的样式，即改为display：block显示对应的元素，为false时则通过display：none隐藏对应的元素
四十五、url输入到地址栏后发生了什么
发生的大致过程是这样的：
- DNS 解析
- TCP 连接
- 发送 HTTP 请求
- 服务器处理请求并返回需要的数据
- 浏览器解析渲染页面
- 连接结束
输入了一个域名,域名要通过 DNS 解析找到这个域名对应的服务器地址(ip),通过 TCP 请求链接服务,通过 WEB 服务器(apache)返回数据,浏览器根据返回数据构建 DOM 树,再把 css 形成一个样式表.这两个东西结合,变成了 render 树.页面上通过重绘和回流的过程,渲染出页面来
四十六、Number和parseInt的区别
umber()和parseInt()都可以用来进行数字的转换。
parseInt()函数：
parseInt()函数用于解析字符串并将其转换为指定基数的整数。它需要两个参数，要解析的字符串和要使用的基数。基数是一个介于2和36之间的整数，表示数字的基数。
如果parseInt()在解析过程中遇到不符合指定基数的字符，它将忽略该字符和所有后续字符。然后它将解析到该点的值作为一个整数返回。在这种情况下，允许使用前导或尾随的空格。
如果parseInt()函数得到参数如果以数字开头，就会返回开头的合法数字部分；如果以非数字开头，则它将返回NaN。此NaN值不是任何基数的有效数字，不能用于任何数学计算。
语法：
parseInt(string, radix)
Number()函数：
Number()函数用于创建基本类型Number对象。它接受一个参数，即数字的值。此值可以使用字符串传递，Number函数将尝试将其表示为数字。如果参数无法转换为数字，则返回NaN值。此NaN值不是有效数字，不能用于任何数学计算。
语法：
Number(valueString)
区别：
1、当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)；parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN。
2、parseInt()仅返回整数值的区别，而Number()返回包括浮点的所有数字。
四十七、axios的封装有哪一些
1.一般情况，axios的封装我们一般会在src文件夹下创建utils文件夹下的的request.js文件中
2.在request.js文件中引入axios,进行封装，baseURL代表后端即服务器的地址，timeout表示接口的响应时间，超时退出
在页面登录的时候我们通常情况下会随机生产token,为保障服务器接口的安全性，会要求在进行axios的封装时携带token调用每个接口
3.创建拦截器，确保能正确的接收接口返回的值
4.创建api文件夹 ，在api文件夹下创建接口文件colllect.js，文件中引入src中的request.js文件，创建接口函数，区分get方法和post方法所传入参数的不同
5.在子页面中引入你所需要的接口。
import { getDictValue } from '@/api/collect'
在methods中调用接口
methods:{
getList('参数').then(res=>{
//接收后台返回的数据
console.log(res)
})
}
四十八、vueRouter的原理
vueRouter是前端路由，当路径切换的时候在浏览器端判断当前路径，并加载当前路径对应的组件，它有两种模式：一种是Hash模式，一种是History模式
Hash模式：是以url中#后面的内容作为路由地址，可以直接通过location.url来切换浏览器的地址，如果只改变了#后面的内容，浏览器不会向服务器请求这个地址，但是会把这个地址记录在浏览器的访问记录中，当hash改变后，要监听hash的变化，并做相应的处理，我们可以监听hashchange事件，当hash发生变化时，会触发hashchange事件，在hashchange事件中记录当前路由地址，并找到当前路由对应的组件，重新渲染在浏览器中
History模式： 路径就是普通的url，通过history.pushState()方法来改变地址栏，并把当前地址记录在浏览器的访问历史中，并不会真正的跳到指定的路径，也就是浏览器不会向服务器发送请求。通过监听popstate事件，可以监听到浏览器历史操作的变化，在popstate事件中可以记录浏览器地址栏改变后的地址，要注意的是，调用history.pushSate()和history.replaceState()不会触发popstate事件，只有点击浏览器的前进后退按钮及调用history.forward()、history.back()、history.go()方法时才会触发popstate事件。最后通过路由找到对应的组件，渲染在浏览器中
但是vueRouter的history模式并不会向服务器发送请求，是因为vue-cli对history模式做了处理
