幕布链接（完整版）：面试终极 - 幕布
目录
41. Uni-app的认识？遇到了什么兼容性问题？如何解决？
1、弹性布局的认识
- 在css3中新增的布局方式，相比于传统的盒子模型布局（需要明确的数据进行分布），更加灵活和自由
- 比如说在移动端容器大小动态变化但是内容大小不变的情况下能够保持相对位置的不变
- 给容器设置display:flex，就可以把容器变成弹性布局容器，还可以通过flex-direction来指定内容的方向，通过flex-wrap来指定内容的换行方式，通过justif-content指定内容的水平分布方式；通过align-items指定单行内容的垂直方式；用过align-content指定多行内容的垂直方式。
2.Var和let有什么区别
- var是es6之前用来声明变量的关键字；let是es6中新增的用来声明变量的关键字，解决了var存在的一些问题；
- var有变量提升（在每一个代码块中用var声明变量和function声明函数会被优先解析），let没有；
- var可以重复声明，let不可以；
- var声明的全局变量回作为window的属性而let不会；
- let会识别块级作用域，var不会
3.==和===的区别
在js中存在一些隐式的数据类型转换，所以==在比较时会尝试转换为相同的类型去比较，===就不会，所以数字5和字符串“5”，如果双等号是true，三个等号是false
4.Js事件
- click dbclick mouseenter mouseleave mousedown mouseup wheel keydown keyup keypress
- load（用户进入某个页面，加载网页的正确版本。） resize（窗口或者框架被重新调整大小）
- hashchange（当URL的片段标识符更改时） popstate（每当处于激活状态的历史记录条目发生变化时）
-
5、Vue计算属性
- 通过computed来进行定义，是用来缓存一些通过计算才能得到的结果，定义为计算属性可以节省计算量
- 比如说有总的订单数组，如果想要在页面中显示不同状态的订单，就可以通过定义计算属性的方式把不同状态的数组分别获取到；
- 比如说计算一个商品订单的总价也可以通过计算属性进行获取
6.Vue采用指令
- v-bind属性绑定 v-html v-text
- 判断：v-show v-if v-else-if v-for v-else v-once v-pre
- v-on @
- v-slot #
- v-model:双向绑定
- v-cloak会变为一个属性 绑定于内容的渲染阶段，可以借助css属性选择器进行内容渲染前隐藏
- v-show通过display控制元素的显示隐藏，更加适合频繁切换的场景；v-if通过是否渲染来控制元素的显示隐藏，更加适合有选择的进行固定内容输出的场景
7.Html中的浮动怎么使用
- 1.浮动是用来解决块级元素不能在同一行显示的问题
- 2.给需要在同一行显示的元素都去添加float：left或者float：right
- 3.浮动会脱离文档流，如果父元素没有高度则不会把父元素自动撑开；
- 4.如果浮动元素没有容器或者容器没有高度，后续的普通元素会进入浮动元素的下面
- 5.容器不能自动撑开的问题，通过给容器设置overflow：hidden可以解决
- 6.给容器设置伪元素：：before display：bloak;clear:left[right|both]清除浮动的影响
8.箭头函数
- 是在es6中新增的对于匿名函数的一种简写方式，可以把形参放在箭头的左边，返回值或者代码块放在箭头的右边
- 箭头函数内部没有自己的this指向和arguments对象，指向的是它的上下文对象
9.Js的this指向
- 每个函数内部默认可以访问的一个变量，表示的是当前函数的调用者，所以函数未被调用的时候，this是没有意义的
- 普通函数调用this =>window
- 对象的方法调用this => 对象
- 实例化类的方式 this => 最终实例化的对象
- call/apply在函数调用时指定this
- bind在函数声明时指定this
- 在调用时指定
- call
- fn.call(this参数，剩余参数)
- apply
- fn.apply(this参数，[剩余参数])
- call和apply调用函数的时候直接指定当前这次调用的this指向
- call传参数直接传，apply需要用数组的方式进行传参
- 在定义匿名函数时指定
- .bind在定义匿名函数的时候直接固定将this的值固定为某个值
- let fn=function（）{}.bind(this参数)
- setInterval(function(){}.bind(this参数)，1000)
- div.οnclick=function(){}.bind(this参数)
- let.obj={fn：function(){}.bind(this参数)}
10.Call、apply
- call/apply在函数调用时指定this
- 如果函数还需要传递其他的参数，call依次正常传递，apply需要剩余参数放到一个数组当中
11.Vue中的$nextTick()
- vue中vue.$nextTick() this.$nextTick 表示将回调函数中的内容放置到下一次事件循环执行
- vue更新数据时数据是同步的更新的，但是DOM是异步更新的，所以如果我们需要在dom更新后立即获取到最新的状态 ，就需要使用$nextTick()来实现
12.生命周期函数
- beforeCreate created beforeMount Mounted beforeUpdate Updated beforeDestroy destroyed
- beforeCreate created beforeMount Mounted组件渲染阶段必定会执行的操作
- Mounted表示渲染完成，所以一般发起数据请求更新页面内容都会被放置到mounted中来完成
- 父子组件加载渲染过程
- 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 父子组件销毁过程
- 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
13.Css中的定位怎么使用
- position：static 默认值 没有任何效果 静态定位
- position：sticky 粘性定位 有一定的兼容性问题，根据条件表现出固定定位或相对定位的效果
- position：relative 相对定位 相对于自身原本所在的位置进行定位
- position：absolute 绝对定位 相对于定位属性的父元素或者当前可视区域进行定位
- position：fixed 固定定位 相对于浏览器窗口进行定位
- z-index用来调整定位元素的层级（除了static）
- left right top bottom用来具体设置定位元素的位置
- 快速定位的方式
- position：absolute;left:0;top:0;bottom:0;right:0;margin:auto居中
- position：fixed；left：50%；margin-left：-630px;bottom:100px;紧贴边缘
14. Js类的认识
es6中用来定义类的方式
实现类的继承
class A extends B{
constructor(){super()
}
}
15.Js的数据类型
- 分为两类数据类型
- 初始数据类型 栈区 数值 ，字符串，布尔值，undefined，null，symbol
- 引用数据类型 堆区 对象 访问当前值的时候访问的是引用地址
- 如何判断数据类型是什么 ？typeof 变量
- 判断某个对象是不是某个类的实例？对象 instanceof 类
16.字符串和数值相加的结果
- 1+“1” "11" //加号不进行转换
- 1-"1" 0
- 1-"a" NaN
- 模板字符串
- 变量a和变量b相加的结果是${a+b}
17.Vue中的Watch
- vue中侦听器配置，vue2中会对所有的data的变量添加数据监听，会在值改变时通知所有引用data中的值的地方进行更新，watch就是可以在vue内部的监听之外额外设置自己的监听，一般在watch中进行的都是开销比较大的操作比如数据请求
18.Vuerouter守卫函数
- 全局守卫
- beforeEach 全局前置守卫 进入每一个路由之前都会触发的
- beforeResolve 全局解析守卫
- afterEach 全局后置钩子
- 路由独享守卫
- beforeEnter在路由中定义的守卫
- 组件内守卫
- beforeRouteEnter进入
- beforeRouteUpdate更新
- beforeRouteLeave离开
19.Ajax
- Ajax是一种用于创建快速动态网页的技术。AJAX全称是(Async Javascript and XML)。ajax的使用也是非常普遍的，在vue中使用的axios，就是通过 promise 实现对ajax技术的一种封装，AJAX 是异步的JavaScript和XML，使用 XMLHttpRequest 对象与服务器通信；XML是 一种数据交换格式， 用来进行前后台交互的数据。ajax的功能是：使用JS通过异步的方式进行前后台数据交互。使用Ajax进行数据交互相比于传统的将数据内容包含在页面的方式，拥有更友好的交互性体验。可以在不刷新不跳转网页的前提下更新页面的数据内容。
- 具体的使用步骤为：①先实例化ajax对象 var xhr = new XMLHttpRequest();②再进行配置请求： xhr.open("请求方法（get/post）","请求地址","是否异步连接（true/false）")；③接着send() 用于发送请求；④可以指定返回数据的处理格式 xhr.responseType="json"；⑤最后 接收结果,默认异步接受 xhr.οnlοad=function(){xhr.response接收返回值}；
20.Rem什么
- css单位，表示的相对页面根元素字体大小的倍数，em当前元素字体大小的倍数
- rem布局 如果我们希望实现在不同的手机屏幕上都能够看到完全成比例的布局效果就可以使用rem
- 因为一般移动端界面的设计稿宽度都是750px,所以我们设置在750分辨率下，rem的大小基数为100px(50px),设置100的原因，1方便计算，2HTML字体大小不能小于12px
- 通过媒体查询技术或者js，动态修改的在不同分辨率下HTML字体大小的值，从而改变1rem所代表的实际大小，实现网页的等比例缩放
21. 组件库用过哪些
vue2-ElementUI，vue3-ElementUIPlus ,小程序weui,uniapp混合开发，uview组件库 vant、Layui、uView、Bootstrap、Mint UI
22.Vuex
- Vuex是一个专为vue.js应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说 vuex就是vue的状态管理工具。利用vuex可以设置用户的权限状态，根据用户不同的权限生成不同的导航菜单。Vuex有五个属性： state用来存储数据，用this.$store.state.xxx调用； getters是基于state的计算属性，用this.$store.getters.xxx调用；mutations 放置处理数据逻辑的方法，只能进行同步的操作，用this.$store.commit调用； actions基于mutations来异步操作数据,用this.$store.dispatch来触发; modules是为了单纯进行模块化拆分的。
- Vuex完整的运行流程：从state开始，state是我们vuex存储数据的地方，我们可以把它render到我们的组建当中，$store.state/mapState操作渲染，在组件当中dispatch调用actions(actions一般和后端接口进行对接，后端接口是异步的),actions通过（commit）调用Mutations，然后Mutations所有的行为会记录到Devtools里，然后Mutations会通过Mutate操作我们的state。
- vuex使用场景：
- 当一个组件需要多次派发事件时。例如购物车数量加减。
- 跨组件共享数据、跨页面共享数据。例如订单状态更新。
- 需要持久化的数据。例如登录后用户的信息。
- 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时
23. 小程序数据缓存
wx.setStorage wx.setStorageSync wx.getStorage wx.getStorageSync wx.removeStorage wx.removeStorageSync
24. 微信登录流程
点击登录按钮，通过给按钮设置open-type="getUserInfo"来获取用户基本信息，然后监听一个bindgetuserinfo事件，在事件当中，通过事件对象可以得到事件的基本信息，包括头像，昵称，性别等信息，之后调用wx.login（）API获取到用户的code（判断用户是否授权读取用户信息），结合userInfo获取到的基本信息通过 wx.request() 方法（携带头像，昵称，code）向服务器发送一个请求，后端把 appid , appsecret 和 code 一起通过像axios插件发送一个请求到微信小程序的官方API服务器。appid 和 appsecret 都是微信提供的，用我们的code交换我们当前用户的open_id信息，之后根据open_id来判断当前用户是否注册过，如果没有注册过，那么结合用户的头像和昵称进行注册，如果注册登陆过，直接返回一个用户登录成功的状态，之后根据openid和sessionKey来生成一个加密的token，把token返回到浏览器当中，客户端拿到token之后，保存下来，之后发送每一个请求，就把token携带上进行一个安全的验证。
25.Vue组件之间通信
- 父子组建通信props $emit
- 上下级组件 $root $parent $refs
- 上下级组件 provide inject
- 同级组件 event hub 利用vue 借助事件api |$on $off $emit实现数据传递
- vuex处理复杂的组件间共享的业务逻辑问题
- Event bus 任意组件通信
- 隔代相传：this.$attrs/this.$listeners
26. 什么是图片精灵
是一种进行网页性能优化的技术，它的原理是将网页中要用到的多张小图片拼接到一张大的图片当中，在使用时只需要发送一次请求将大图片得到，然后就可以根据background-position进行图片位置的调整从而用于不同的元素，类似的还可以使用将图片转换为base64格式或者字体图标的方式来呈现。
27.break和continue
都是用来在流程控制中表示结束的，break会直接跳出循环，执行循环后的代码，continue只是跳出当前循环，如果后续可以继续循环则继续执行
28. eval函数的用途
- eval（"var a=1;b=1;alert(a+b)"）
- 是用来执行字符串格式的js代码的，它拥有单独的作用域
29.JSON对象的方法
- JSON.stringify()用于将json格式转换为字符串
- JSON.parse()将字符串格式的对象转化为json格式
- 比如用于localstorage存储数据，可以将复杂格式的数据（数组、对象）和字符串之间进行相互的转化以便存储
30. vue中如何进行自定义指令？
- 可以全局定义，使用vue.directive（），第一个参数是指令的名字，不加v-，第二参数是指令的钩子函数/对象数据；也可以局部定义，在new vue实例中通过directives局部定义;vue2指令的钩子函数有inserted(被绑定元素插入父节点时调用)，bind(元素第一次绑定指令时进行调用，只调用一次)，unbind(解绑时调用)，钩子函数可以接受和操作的值，可以是当前元素的原生对象，也可以是指令的值，指令的修饰符，指令的字符串等，根据这些值可以对元素添加相应的操作
- 全局定义vue.directive（）
- Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数
- 局部定义{directives:{}}
- 指令名称 指令相关的钩子函数
- vue2 inserted()
- vue3 和组件保持一致
- 在钩子函数中可以接受到和操作的值，可以接受到当前元素的原生对象，可以接收指令的参数，指令的修饰符，指令的值等等，根据这些值可以对元素添加相应的操作
31. vue3中ref和reactive的区别
- 都属于组合式API
- ref将一个普通值变为一个响应式的值，后续要操作它的值必须通过value属性操作
- reactive将一个普通对象变为响应式的对象，后续直接操作对象属性就会触发响应式的内容更新
32.ts中的泛型作用
function<T>fn(val:T)：T[]{
return[val]
}
使用一个类型变量来表示一种类型
ts中在函数、接口、类定义的过程，如果有一些参数的数据类型是动态的，那么就可以使用泛型定义一个变量表示这个类型，以便更好的进行代码类型的约束
33.localstorage和sessionstorage的区别 cookie
- localstorage和sessionstorage都是h5中定义的特性，用于方便进行数据的缓存，尤其是开发移动端应用时
- 相比于cooKie，cookie是可以由服务器去设置和获取进行用户鉴权操作，localstorage和sessionstorage只能由js操作，存储数据量也会更大
- localstorage是永久保存的，除非手动清除，sessionstorage是只保存一次会话的数据
- lo se cookie 每一个浏览器都是独立保存的；每一个域名下都是独立保存的
34.媒体查询的认识
- @media screen and(min-width:320px){}旧版
- @media (min-width:320px){}新版
- 能够根据当前的设备和屏幕宽度让不同的css代码生效
- 基于媒体查询的十二栅格系统，实现响应式布局
- 在进行移动端布局时通过媒体查询修改HTML字体的大小
35.什么是回流和重绘
- 回流也叫作重排，在dom渲染过程中计算每个盒子的宽高位置进行渲染排布
- 重绘，将虚拟的dom渲染到真正的屏幕中，也就是分配每个像素点的颜色
- 回流必定引起重绘，重绘不一定引发回流
36.什么是原型
- 在js中每个对象都有原型，原型本身也是一个对象，object.prototype是所有原型链的最终指向
- 访问对象的属性和方法的时候如果当前对象身上没有就会沿着它的原型链一直向上查找
- 在js内置对象中，比如数组，js会将所有的方法添加到数组对象的原型（Array.prototype）上，每个数组就都可以使用这些方法了
37. 跨域问题
- 发送请求的浏览器端地址和接收响应的服务器端地址的协议，域名，端口号三者有任意一个不一致则会触发跨域问题，违反同源策略
- jsonp不再借助于ajax而是使用script来完成请求
- 在服务器中直接设置允许跨域 Accept-Control-Allow-Origin：*；
- 使用请求代理由前端自己的服务器（localhost：8080）转发请求，vue项目中在vue.config.js文件中，在uniapp中manifest.json中进行配置
38.http常见的状态码
- 200 ok
- 301 永久重定向
- 302 临时重定向
- 401 未认证
- 403 禁止访问
- 404 找不到请求的资源
- 500 服务器错误
39.Vue项目中如何对请求进行处理
- 我们是基于axios来进行请求发送的，
- 因为axios不同类型请求的格式不一致，所以我们自己会重新统一封装接口，保证格式一致
- 会统一添加请求拦截和响应拦截 处理token相关的业务
- 会将请求地址统一放置到一个文件中
- 发送请求的时候使用async和await进行具体请求的处理
40. 小程序云开发
- 先开通自己的账号的云开发环境，选择合适的配额
- 在小程序中创建云函数 编写云函数代码并上传
- 在具体的业务中调用云函数进行操作或者调用响应的app进行云存储
41. Uni-app的认识？遇到了什么兼容性问题？如何解决？
- 跨平台的开发框架 结合HbuilderX编辑器可以方便的进行多端应用的开发，电商项目的移动端就是基于uniapp开发的
- 发送数据请求，h5中需要配置跨域而小程序中可以直接根据地址请求
- 布局使用的是rem,在h5中能正常展示，而小程序中需要通过page-meta自己指定字体大小
42. 字体图标
- 来自css3新增的特性 @font-face{} 自定义字体，所以我们借助于这个特性，可以将某些图标作为字体包装起来，我们就可以像使用文字一样使用这些图标
- 我们一般使用阿里巴巴矢量图标库来完成字体图标的定义和引用
- 两个优点 可以像控制字体一样控制图标的颜色、大小等，非常方便； 可以减少网页请求，优化网络性能
43. 事件委派
当我们要给多个元素添加同一个事件的时候，可以通过委派的方式将事件绑定到他们的父元素身上，因为事件冒泡的原因，在子元素上触发的事件也可以被父元素的事件处理程序监听到，在父元素的事件处理程序中可以通过e.target判断当前真正的事件源并进行相应的操作
44. 浅拷贝与深拷贝
- 面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？ | web前端面试 - 面试官系列 (vue3js.cn)
- 浅拷贝：for in 遍历对象，依次复制； object.assign({}，obj}
- 深拷贝：JSON.pase();JSON.stringify(); 使用递归函数；
function deepCopy(obj) { let newobj; if (Array.isArray(obj)) { newobj = []; } else { newobj = {}; } for (let i in obj) { if (typeof obj[i] === "object") { newobj[i] = deepCopy(obj[i]); } else { newobj[i] = obj[i]; } } return newobj; }
45. Promise的认识
- 解决回调地狱问题，因为js单线程异步机制的原因，我们要接收异步操作的结果一般只能在回调函数中获取，如果要基于这个结果继续发送异步请求，就会造成代码层层嵌套，这就是回调地狱问题
- promise通过将异步请求封装，在获取异步操作结果的时候通过.then方法获取，并且在.then的回调函数中可以直接返回一个值，返回的值会被继续封装为promise对象，所以可以继续以.then的方式调用，从而脱离回调地狱层层嵌套的逻辑
- 当然在具体的使用过程中我们可以借助于async和await，像编写同步代码一样处理异步的逻辑
46. vue中Key属性的作用
在使用v-for/v-if、v-else的时候通过key属性可以给每一个元素添加一个唯一标识，为了在内容更新时可以更加高效的更新特定的元素
47.Vue-router的两种模式
- vue-router实现的是前台路由的效果，也就是在网页在不发生真正跳转的情况下地址和页面内容都发生改变的效果；要实现前台路由有两种方式，一种是基于h5的historyAPI，另外一种是基于路径的hash，window.onhashchange,所以对应到vue-router中，就有两种模式一种hash模式，一种history模式。
- hash **模式是通过改变锚点(#)来更新页面 **url，并不会触发页面重新加载。我们可以通过window.onhashchange() **监听到hash 的改变，从而处理路由，而 history这种模式充分利用 **history.pushState **和 history.replaceState** API **来完成 **URL **跳转而无须重新加载页面。使用 **history **模式时URL中不带 **# 号。
48.组件的封装和定义
- 将需要抽取出来作为组件的布局代码和样式代码抽取出来，放置到一个单独的vue文件中
- 在组件中定义组件内部数据状态（data）和事件监听（method）
- 定义组件外部的属性（props）和需要广播的事件（$emits）
49. Vuex中如何调用mutations
- mutations是用来定义如何操作state的方法的。
- this.$store .commit("add",{num:1})
- 借助于mapMutations（）这个辅助函数，可以直接将mutations扩展到methods中，然后就可以通过this直接调用了
50.Git常用命令
- git init 初始化一个git仓库
- git add . 将修改提交到暂存区
- git commit -m “版本描述” 将暂存区的修改存储到历史区成为一个版本
- git checkout 文件名称 用暂存区的版本覆盖掉工作区中未提交的内容
- git reset --hard 版本号 将历史区的某个版本展示到工作区
- git status 查看当前状态
- git log 查看版本记录
- ---------------------------------------------------------------------------------------------------
- git clone 仓库地址 将远程仓库克隆到本地
- git pull 将远程仓库的最新版本拉取合并到本地仓库
- git push 将本地仓库的最新版本推送到远程和远程仓库进行合并
- -----------------------------------------------------------------------------------------------------
- git branch 分支名称 创建一个本地分支
- git checkout 分支名称 切换到某个分支
- git checkout -b 分支名称 创建并切换分支
- git merge 分支名称 将某个分支合并到当前分支
51.闭包
让函数内部的局部变量在函数调用完成之后不被销毁的一种方式，通过在函数内部定义一个函数，通过内部函数引用外部函数的变量，只要内部函数不被销毁，外部函数的变量就不会被销毁
选项卡：
function fn(){ var num=10; return function(){ console.log(num++) } } fn(); divs.forEach(function(v.i){ v.onclick=function(){ alert(i) } })
52. setInterval和setTimeout
- setInterval每间隔一段时间调用一次自己的回调函数
- setTimeout 延迟一段时间之后调用自己的回调函数
- 它们两个函数的回调函数是异步执行的
53. 数组对象常用的方法
面试官：数组的常用方法有哪些？ | web前端面试 - 面试官系列 (vue3js.cn)
- push pop unshift shift splice
- join
- slice concat
- sort
- forEach filter map
- some every
- indexOf lastindexOf
- reverse
- reduce reduceRight
- es6: find findindex
- flat flatmap 降维映射
- copyWithin
- includes
- keys values entries
- from
54.解构赋值
- 数组的结构和对象的结构,单纯是一个更加简单的写法
- let [a,b,c]=[1,2,3]
- let {name}=obj;
- let {ctx}=this;
- let {body}=ctx.request
55. Vue的插槽
在组件的内部如果有部分内容需要调用组件的时候再指定，就可以在组件内部通过slot标签来进行插槽位置的指定，插槽可以命名也可以通过插槽向外传递组件内部的数据 子组件中的提供给父组件使用的一个占位符
56. 小程序中的字体单位
在750px的分辨率下1rpx=1px，其他分辨率下rpx代表的大小会动态改变
57. Vue的router和route的区别
- $router是路由实例对象，内部包含一些用于跳转和动态添加路由等的方法；push，go（页面路由跳转），addRoute（）
- $route是当前页面的路由信息对象，内部包含当前页面路径path，查询参数query，路径参数params，元信息meta等信息对象
58. css3动画如何实现？
- 用什么实现css3动画效果-前端问答-PHP中文网
- 即指元素从一种样式逐渐过渡为另一种样式的过程
- 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合
- css实现动画的方式，有如下几种：
- transition 实现渐变动画
- animation 实现自定义动画
- 总结：
- transition（过度） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
- transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
- translate（移动） 只是transform的一个属性值，即移动
- animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属性
- ----------------------------------------------------------------------------------------------------------------------------------------------------------------
- @keyframes 名称{
- from：{}
- to:{}
- }
- @keyframes 名称{
- 0%{}
- 20%{}
- 40%{}
- 60%{}
- }
- .demo{
- animation:名称 时间 动画曲线 延迟时间 动画次数 动画播放的方向 动画停止时的样式 动画播放状态；
- animation-name animation-duration animation-timing-function animation-delay
- animation-play-state：指定动画是否正在运行或已暂停。
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-iteration-count ：定义动画应该播放多少次。
- animation-delay：属性定义动画什么时候开始。
59.选择器优先级如何计算？
- ！important可以让某个样式拥有最高的优先级
- 通过style设置行内样式
- id选择器 100
- 类名选择器 伪类选择器 属性选择器 10
- 标签名选择器 1
- 通用选择器 0
60. typeof能够得到哪些值？
- 结果都是object string number undefined boolean object symbol function(字符串)
- undefined -> undefined
- ** null -> object
- ** 100 -> number
- "abc" -> string
- true -> boolean
- Symbol() -> symbol
- [] -> object
- {} -> object
- ** function(){} -> function **
61. 权限控制功能的实现（PBAC 基于角色的权限控制）
- 先进行菜单管理，对于应用当中当前有哪些菜单进行统一的管理
- 然后进行角色管理，创建我们在系统中拥有的角色（超级管理员、部门负责人、业务员）
- 为每个角色设置当前对于每个菜单每个功能的操作权限
- 添加用户并为用户分配角色
- 在代码内部将需要管理的路由单独划分出来
- 当不同角色的用户登录之后，根据用户的角色id获取相应的菜单信息
- 根据菜单信息去动态的加载路由和生成导航目录
62. es6的新特性
- 变量：let const 块级作用域
- 数据类型 ：symbol() 模板字符串
- 运算符：扩展运算符 解构赋值 幂运算
- 流程控制:iterator遍历器接口和for....of...结构
- 函数：参数默认值 箭头函数
- 数组：includes find
- 对象：通过class定义类 对于属性和方法的简写
- promise async/await import export（模块化）proxy reflect
- 数据结构：
- Set结构，存储不重复的成员值得集合
- Map结构，键名可以是任意类型得键值对集合
63. node.js和js有什么区别
- nodejs是运行在服务器端，js试运行在浏览器端的
- nodejs的全局对象是global，js的全局对象是window
- nodejs中没有dom BOM相关的api nodejs有自己的模块化系统和内置模块
64. vue中父组件调用子组件的方法
- $refs找到子组件就可以调用了
65. vue中如何进行深度监听
- vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。
- watch：{
- name：function（）{}，
- obj：{
- handler：function（）{}，
- deep：true
- }
- }
66. 如何实现水平垂直居中？
- position：absolute/fixed ; left :0;right:0;bottom:0;top:0;margin:auto;
- position：absolute/fixed ; left:50%;margin-left:负盒子宽度的一半；top：50%；margin-top:负盒子高度的一半；
- position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)
- display：flex；justify-content：center；align-items：center；
67.css中如何实现一个三角形？
div {
width: 0;
height: 0;
margin: 0 auto;
border-left: solid 150px #fff;
border-right: solid 150px #fff;
border-bottom: solid 150px #000;
}
68.如何捕获await的异常结果
- p.then().catch()
- p.then(()=>{},()=>{})
- try{
- let res=await p1();
- }catch(e){
- console.log(e)
- }
69. vue3相比于vue2新增的特性
- 在vue3中，去除了构造函数，转而使用createApp的方法创建vue应用，可以链式调用。
- 在vue3中，去掉了.sync修饰符，只有v-model这个方法可以进行双向绑定。
- vue2中v-for优先级高于v-if，vue3中v-if优先级高于v-for，
- 新增的组合式API
- ref reactive computed watch watchEffect readOnly mounted.....
- teleport
- Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。
- 多根节点
- v-model的参数
- emits的配置
70 Keep-alive的作用
- keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹>配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
- 保持动态组件内部的状态在失活时不变
- keep-alive的使用只需要在动态组件的最外层添加标签即可。
- <keep-alive>
- <component :is="compName"></component>
- </keep-alive>
- 如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
- <router-view></router-view>
71.对模块化的了解import和require的区别
- Commonjs(module.exports require)
- Es6 Module(export import)
- commonjs是编写时加载 ESM是执行时加载
- commonjs的require是对导出对象的浅拷贝，ESM的import是将目标的声明直接导入
- commonjs的require是同步执行 ESM的import是异步执行的但是它有专门的模块解析阶段
72.js的异步机制
- 1、js中的代码是分为同步代码和异步代码的
- 在代码最终执行的时候先执行同步代码再执行异步代码
- 异步操作：setInterval setTimeout 事件 ajax的 send onload
- 2.js的运行机制是单线程异步机制 所谓的单线程是同一个时刻只能做一件事情， 所以对一些开销比较大的操作， js会以异步的方式来执行，
- 具体当js执行器解析将要运行代码的时候，会将同步代码放置到执行栈中依次执行，然后将异步任务放置到等待区域 ，当执行栈清空之后， 就会判断有没有可以执行的异步任务， 如果有就将异步添加到任务列表当中， 添加完成之后如果任务队列中有可以执行的任务，就将任务队列中的任务放入执行栈当中依次执行， 执行栈清空之后，继续判断有没有可以执行的异步代码，不断循环的过程叫做事件循环。（事件循环）
- 3.所有的代码都分为宏任务和微任务， 宏任务包括整体代码块的执行（script） setTimeout setInterval setImmediate I/O 微任务包括promise的.then和promise.nextTick 。 执行完一个宏任务之后就要读取当前可以执行的微任务， 微任务清空之后继续读取宏任务队列(promise中直接输出的console.log（）是同步的，在依次分布队列的时候，会直接执行promise的输出)
