2021前端 Vue 面试题
W3C官网学习最新的ES6
MVVM
M是 Model 层，V是视图层 ViewModel是View和Model层的桥梁，model数据会绑定到viewModel层并自动将数据渲染到View视图中，视图变化的时候会通知viewModel层更新数据。
防抖和节流：
防抖：就是一定时间内，只会执行最后一次任务；
频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
节流：就是一定时间内，只执行一次
鼠标不断点击触发，mousedown(单位时间内只触发一次)
回流
原理： 当render树的一部分或者全部因为大小边距或其他原因发生页面布局的改变，需要重新绘制页面的时候叫做回流
重绘
原理：当元素一部分属性发生变化，如背景图片改变文字颜色改变等，不导致页面布局发生改变而需要重新渲染的过程叫做重绘
Es6新增
let／const
let :
1.不存在变量提升
2.暂时性死区
3.不允许重复声明，同一作用域内只能声明一次
4.新增的块级作用域 , 只要有花括号 就是一个块级作用域
const
用来声明常量，其使用规则除了声明之后不能修改之外，其他特性和let一样
对象方法函数的写法
可以直接省略function
var obj={
song(){
alert(‘我在唱歌’);
}
}
includes(str,start) 判断字符串中,是否包含某个字符 (第二个参数表示从第几位开始)
字符串拼接加但反引
${变量}
ES6箭头函数
(参数1, 参数2, …, 参数N) => { 函数体 } 如果只有一个参数可以省略括号 如果直接有返回值可以省略花括号
如果在箭头函数中使用this, 会向上一级作用域中进行查找this,即宿主对象中查
this的指向
函数调用模式 this —> window 函数名()
方法调用模式 this —> 调用方法的对象 对象.方法名() obj ={say:function(){console.log(this)}} 谁调用就指向谁
构造函数调用模式 this —> 创建出来的实例 new 函数名()
在元素事件中this----->指向当前事件对象
箭头函数中this没有明确指向,会向上一级(宿主对象)寻找
解构赋值
var [a,b,c] = [1,2,3]; // 数组
var {age,name,like} = {name:“admin”,age:18,sex:true}
Symbol数据类型
Symbol 数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。
场景：Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性
set集合
返回值是一个新的Set对象。
去除数组重复的值
map集合
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
可以使用for of 来遍历 可以遍历出它的每一个值
…语法
将字符串或者是数组一些类型拆分
模块化
ES6
导入 import 自定义模块名 from " 引入的地址 "
暴露 export default { }
支持解构赋值，这样就可以按需引入
import是编译时调用，所以必须放在文件开头
import 是ES6语法 所以要在浏览器兼容的话必须将ES6 转成ES5 import 语法也会被转成 require语法
引入复杂数据类型时 数据浅拷贝该对象
导入 const 自定义模块名 = require ( " 引入地址 " )
暴露 module export = { }
call:
第一个参数是 修改的this指向，第二个参数就是想要传入的参数
如果不传参 或者是第一个参数是 null 或者是 undefined 它都指向window
apply：
它基本的形式跟call 差不多 唯一的区别在于传参的方式，在第二个参数是以数组形式传入进去
bind：
第一个参数也是改变的this的执向，传参也是一样，只不过跟他们两个的区别在于，它们都是自动执行的，而bind需要手动执行，bind不兼容IE6~8
清除浮动
1.style="clear:both;
2.使用after伪类 里面设置一些样式
3.设置overflow为hidden或者auto
同步和异步的区别是什么？
1、同步会阻塞代码执行，而异步不会。
就比如alert是同步，setTimeout是异步。
同步就是在一个事件执行时，只有等它结束了才可以拿到信息，继续向下执行
异步是不需要任何等下去，直接执行下面的操作不管其它的状态有结果就返回，这样提升效率，但是也会造成很多困扰，像ajax 就是异步操作，需要通过promis来获得结果处理相对事件
js运行机制
单线程异步，单线程就意味着它的任务都是在前一个任务结束之后，在执行后面一个，这样非常影响性能 ， 所以才有了异步和同步
-
整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；
-
同步任务会直接进入主线程依次执行；
-
异步任务会再分为宏任务和微任务；
-
如果同步代码执行完毕后，在将异步微任务调到主线程
微任务结束后 来开始调用宏任务
微任务 pormise
宏任务 setTiemout script
Promise 如何使用
创造一个Promise实例
Promise实例生成以后，接收一个回调函数 ，回调函数接好接受两个参数一个是成功（resolved）的回调函数和 失败（rejected）的回调函数，分别执行不同的操作
在外面调用的地方就可以直接通过then来接收
可用Promise的then和catch
Vue中父子传值
父组件传子传值
父组件在调用子组件的位置，添加一个自定义属性，属性的值就是父组件传入子组件的
在子组件定义的位置，添加一个props选项 ， 数组，数组的元素就是：父组件在调用子组件的位置定义的属性名
props: [ 'a ’ , ’ b '] 来解接收
子组件给父组件传值
父组件在调用子组件的位置，绑定自定义事件。
该事件的处理方法，由父组件定义。方法接收的参数，为子组件发送的数据
在子组件的某个事件或行为中，this.$emit （ ） 来触发事件
第一个参数：是触发自定义事件
第二个参数：传递参数（数据）
父组件使用子组件的方法和数据
- 在子组件的调用处，使用自定义属性
ref添加子组件别名 - 在父组件中，使用
this.$refs.子组件别名获取到子组件实例，从而访问子组件的数据和方法
provide + inject
用于一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效，都能获取到它传入数据。
- provide 选项是一个对象
- inject 选项是一个字符串数组
/ 父级组件提供 ‘foo’ var Provider = { provide: { foo: ‘bar’ }, // … }
// 子组件注入 ‘foo’ var Child = { inject: [‘foo’], created () { console.log(this.foo) // => “bar” }
兄弟传参
let bus = new Vue（ ） new 一个新的实例
bus.$on（ ）绑定事件 在要收的组件中 created 生命周期中 来接收数据
通过 bus.$on ( " 事件名称 " （ 参数是接收的数据 ）=> {
第二个参数是一个回调函数 参数是接收的参数
} )
bus. e m i t ( ) 触 发 事 件 在 要 发 数 据 的 组 件 选 项 中 m e t h o d s 中 通 过 b u s . emit ( ) 触发事件 在要发数据的组件选项中 methods 中通过bus. emit()触发事件在要发数据的组件选项中methods中通过bus.emit( ) 来触发一个事件并传参
Vue的生命周期
vue的生命周期就是每个vue实例被创建之前一直到结束经历的过程，每个过程对应着不同的钩子函数
钩子函数
就是在Vue不同的周期内执行不同的方法
比如：
beforcreate 创建之前 刚刚创建无法访问到data 和 el
created 创建后 可以访问到 data 无法访问el
beformount 挂载之前 渲染虚拟DOM 渲染VDom 通过延时器settimeout 可以异步访问到data
mounted 挂载之后 created 可以完全访问到data
beforupdata 数据更新之前 beforupdata 是拿到渲染多次后的结果
updataed 数据更新之后 再次渲染
befordestory 实例销毁之前
destoryed 实例销毁之后
首页先渲染data 渲染完返回回来又触发数据更新再次渲染
在进入页面渲染之前就获取数据 ， 获取完之后到了页面就直接显示不会出现 进去了页面还没有加载 这叫预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
在beformount
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源
路由守卫
- 导航被触发。
- 在失活 （ 我要离开的组件 ）的组件里调用
beforeRouteLeave守卫。 - 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 全局的解析守卫 已经结束了 开始解析。 - 导航被确认。
- 调用全局的
afterEach钩子 跳转结束。 - 触发 DOM 更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。 组件内的守卫 的回调函数是在 DOM更新之后触发
axios的交互
它的底层还是用的ajax进行的封装，现在是一个请求库 ， 也是用promise 的异步ajax请求库，里面比较特别的就是它的请求和拦截响应器 ，在每次请求和得到响应的都会收到他们的请求和接收，可以对进行相应的操作， 像是在验证后端登录状态的时候，可以在请求里自动携带登录数据，像token ， sesson 这些自动携带在请求头 不用再每次在组件中添加 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
webpack
Webpack 是一个前端资源加载/打包工具
闭包
作用域的嵌套，将原本的局部变量，进化成私有变量（自由变量）的环境，也就是在作用域外拿到作用域内的变量
通常在什么地方用闭包
在别的作用域外面想拿到作用域里面的数据
原型对象
原型对象实际就是一个构造函数的实例对象，与普通的实例对象没有什么本质上的区别，js中每一个对象都有一个原型对象。不过他比较特殊，该对象所包含的所有属性和方法能够供构造函数的所有实例共享. 通过new出来一个实例对象，可以通过this来访问里面的属性和方法
原型链
当我new出一个实例的时候，这个实例系统自动绑定了原型链，当我们访问一个对象属性时，如果不存在这个属性，那么就会去原型对象里找，原型对象又会有自己的原型，最后都是为Object.prototype 它的__proto是null
Vue 框架的优点
（1）轻量级框架：只关注视图层，大小只有几十Kb；
（2）简单易学：文档通顺清晰，语法简单；
（3）数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新；
（4）组件化开发：工程结构清晰，代码维护方便；
（5）虚拟 DOM加载 HTML 节点，运行效率高。
用官网的口号来说 小而美 它自身的生态圈非常少，什么都要自己下，有vue框架有很多地方都参考react 和 angela 像react中的 JSX语法 就是在JS的格式里写HTML 创建虚拟DOM 然后再通过render进行渲染 这点Vue 也拷贝到文档里边，只不过用的并不广泛 还有因为vue 框架面向的都是初级用户 ， 不像react 和 angel 面向的只是高级用户，它把react 和 angela所有的优点都集合起来做封装，用户只注重如何使用就可以 不用考虑怎么实现的
vue - router
因为vue是单页面应用，所以它只能靠vue-router来将这些页面和组件链接起来实现单页面的切换，它的核心就是更新和渲染视图，不是重新请求页面
它的跳转有两种模式
第一种就是 Hash模式
它会在地址上拼接一个# 但是它不会像后端发起请求 通过锚点来来渲染DOM
第二种是History模式：
History跟Hash模式最大的区别还是在于它会像后端发起请求，所以它的地址没有携带#。
V-for中key的作用是什么
渲染的时候，如果不加key的话组件 判断有没有key 如果没有key 它会默认采用复用策略 只会复用那个组件，不会创建新的，如果使用用过的组件它的数据也会和组件一块带过来使用
如何如果动态更新对象或数组中的值
因为 Object.defineProperty()的限制，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决：
this.$set(要改变的数组/对象，要改变的位置/key，要改成的value)
常用的事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
.self 仅绑定元素自身可触发
.once 只触发一次
Vue 如何获取组件内的实例和方法
首先先为标签元素设置 ref 属性，然后通过 this.$refs.属性值获取当前组件的实例或者是方法。
Vue 如何绑定多个事件
可以通过 v-on 传入对象来绑定多个事件：
Vue初始化页面闪动问题
这是因为在vue初始化之前，由于div不归vue管，所以我们写的代码在还没有解析的情况下，容易出现花屏的现象
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] { display: none; }
v-el的作用
在页面上选择一个DOM元素作为vue 要挂载的目标
Vue中如何清除浏览器缓存
项目打包的时候给每个打包文件后面加上时间戳
在后端设置服务器禁止缓存设置
Vue中实现路由跳转
this.$router.push( ’ url’ )
router-link 通过to属性标签跳转 类似a标签
this.$router.replace( ’ url ’ ) 不会产生记 录 美好回退
this.$router.go ( n ) 跳转多少个页面
async await
async用于声明 function 异步
await 等待异步的方法执行完成
只要不在视图范围内就不加载
-
Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的返回一个 new promise（ ） 在这个方法中默认接收一个回调函数 回调函数也会默认接收两个参数 一个是成功执行的方法 还有一个是失败的方法 这个是可以监听异步 一般监听请求数据 等待服务端返回的数据 将请求的数据传参 传入进去 在外面根据请求的数据执行相对的 回调函数 在外面调用的地方可以使用.then 和.catch的方法执行成功 失败 他们都接受一个参数就是里面成功和失败传入的数据 一般是请求数据的结果
-
async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
本地存储方式
Cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage
除非被清除，否则永久保存
仅在客户端（即浏览器）中保存，不参与和服务器的通信
sessionStorage
仅在当前会话下有效，关闭页面或浏览器后被清除
仅在客户端（即浏览器）中保存，不参与和服务器的通信
**HTTP的原理 **（ 三次握手四次挥手 ）
客户端的浏览器首先要通过网络与服务器建立连接 连接之前会发送一个请求给服务器 确定一些信息 还有 状态
HTTPS 是以安全为目标的HTTP 是HTTP的安全版 认证之前 先进行身份验证验证一些算法 交换密钥等一些操作
浏览器解析html会加载资源(js,css)
1.解析HTML结构。
2.加载外部脚本（ JS… ）和样式表文件
3.解析并执行脚本代码
4.DOM构建完成
5.加载图片 等外部资源
6.页面加载结束、
ajax 的get post 区 别 怎么传参
先new XMLHtprequest 创建一个实例
get在地址后面拼接 然后再open 中通过传入get 和 地址 直接请求数据
一般用于信息获取
post open方法中 传入 open 和请求地址两个参数 然后设置请求头 在send中请求数据
一般用于修改服务器上的资源
然后监听请求状态
对称加密和非对称加密的区别
对称加密： 加密和解密的密钥使用的是同一个
非对称加密： 与对称加密算法不同，非对称加密需要两个密钥： 一个公开密钥一个私有密钥
跨域
同源策略：同协议 同域名 同端口
利用script 标签不受同源策略影响
在后端代理一个服务器 ，代理我们的请求发送给服务端
在后端设置一个请求头 ， 允许我们的访问地址
session
会话，代表服务器与浏览器的一次会话过程，这个过程是连续的，也可以时断时续。
cookie中存放着一个sessionID，请求时会发送这个ID；
session因为请求（request对象）而产生；
session是一个容器，可以存放会话过程中的任何对象；
session的创建与使用总是在服务端，浏览器从来都没有得到过session对象；
session是一种http存储机制，目的是为武装的http提供持久机制。
Vue中computed 和 watch的区别
计算属性 ‘computed’：
运用场景： 在购物车的单选或者是全选中，全选按钮必须要跟据单选的按钮决定自己的状态
（1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数 计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值
（2）计算属性内不支持异步操作；
（3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
（4）计算属性是自动监听依赖值的变化，从而动态返回内容。
侦听属性 ‘watch’：
运用场景： 绑定你请求的数据，如果你请求的数据发生变化的话，他都会给注入过依赖的所有数据发生变化，影响视图
（1）不支持缓存，只要数据发生变化，就会重新执行侦听函数；
（2）侦听属性内支持异步操作；
（3）侦听属性的值可以是一个对象，接收 handler 回调，deep （深度监听），immediate （）三个属性；
（3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情.
watch: {
obj: {
//handler接收两个参数（newVal：新值，oldVal：旧值
handler: function(newVal, oldVal){
console.log(newVal);
},
deep: true,//设置为true时会监听对象内部值的变化；
immediate: true//设置为true时会立即以表达式的当前值触发回调；
}
}
Vue 中路由跳转数据的传递
params 方式
params 需要配置动态 在路由对象中 动态绑定你要传的数据
然后路由跳转的时候拼接 或者是 对象形式 绑定你要传入的数据
query 方式
query 不需要配置动态路由，直接直接 ？后面拼接 或者是对象形式 传入数据
接收的话 通过 route 来接收不同方式传递的数据
箭头函数和普通函数的区别
普通的函数this 指向调用它的对象
箭头函数没有自己的this， 它的this指向宿主对象 任何方法都改变不了指向 ，如call（）、bind（）、apply（） 因为它没有自己的this 所有不能作为构造函数
箭头函数不能作为构造函数， 不能使用new 命令，否则会报错
ES6数组的方法
every：
只要数据有一个为false 就是false
some：
只要有一个true 就是true
Array . from:
将伪数组转为真正的数组
find :
查找第一个符合条件的值，并将它返回
includes：
检测数组中是不是包含某个值， 如果找到 返回有个布尔值
Array.of :
将一组数字转为数组
css3的伪类
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type 选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)
p:nth-child(n) 选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n) 从最后一个子元素开始计数
p:nth-of-type(n) 选择其父元素的n个元素
p:nth-last-of-type(n) 从最后一个子元素开始计数
什么是盒子模型
网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.
什么叫优雅降级和渐进增强
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
对BFC规范的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠
事件委托
事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件，委托给更大范围的dom去处理。比如li列表的事情交给ul做
v-show与v-if的区别
v-show：操作的是元素的display属性
v-if：操作的是元素的渲染和不渲染
v-if有更高的开销，而v-show有更高的初始化渲染开销，如
果需要非常频繁地切换，则使用v-show较好；
如果在运行时条件很少改变，则使用v-if较好
flex布局有哪些属性
换行 主轴方向 对齐方式 任何一个容器都可以指定为Flex 布局 display flex
Vue 路由的解耦
1.只有动态路由才能用于路由的解耦
2.在路由中设置动态路由
3.在定义路由的对象内 添加props 为true
4.通过路由跳转的时候传递数据
5.在需要接收参数的组件中通过props 来接收
vue首屏加载过慢应该如何解决?
路由懒加载，会将原来打包一个 app.js 的文件打包成多个文件，异步组件，按需加载，webpack 开启 gzip 压缩，如果图片过多，开启图片懒加载，使用 cdn 资源
vue的单项数据流和双向数据流绑定
单项数据流是指数据是单向的，父组件的数据传递给子组件，只能单项 绑定，
不可以在子组件修改父组件的数据
双向数据绑定：是指数据和页面进行双向绑定，相互影响
解决跨域
客户端代理
就是请求一个满足条件的地址，代理我们的请求，访问到数据在返回给我们
在 cli 脚手架 config 文件中配置 代理我们的请求
JSONP请求跨域
JSONP实现跨域请求的原理简单的说，就是动态创建