css三角形
promise 介绍 有几种状态
三种状态分别为:pending(待处理),fulfilled(成功),rejected(失败)
bfc
“块级格式化上下文”。block可以理解为一个简单的盒模型, Formatting Context则为block的上下文渲染环境.它是一个独立的渲染区域,其作用是使内部元素的布局不受外部元素影响。
应用场景 防止margin出现重叠 两栏布局,防止出现文字环绕效果 清除浮动,防止元素塌陷
页面发生乱码的原因
声明meta charset=UTF-8
h5和html区别
在文档声明上,html比html5长;html5提供了语义化标签,新增了绘图功能(canvas标签、svg)
函数参数数量不固定,怎么获取参数
不管函数有多少个参数,所有的参数都会被保存到arguments到这个数组类型中。如果我们可以从argments数组中拿到最后一个元素,即代表函数的fn,再把其它数组元素作为fn的参数,执行fn(arguments),这样,不管方法的参数列表有多长,都可以把所有参数放到argments中再传递给函数。
怎么区分数组和对象
es6新增:Array.isArray() 如果值是array,返回true,否则返回false (和instance的区别可以检测iframes)
instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
toString.call()检测类型
用constructor
== 和===区别
==值比较 ===类型不同为false
防抖和节流
使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的[时间周期]就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。
axios二次封装
安装 axios、安装后在,main.js中全局引入、在src下新建一个文件夹,在新文件夹创建一个新api.js文件、在文件夹新建一个axios.js文件,用来封装请求接口、在组件中引入使用
解决连续请求,显示loading导致页面闪烁问题
1.在一个请求的情况下,就不会有问题。但是如果存在请求一个接一个(连续请求),就会造成页面闪烁(loading显示 => 关闭 => 马上有显示 => 在关闭 …)
在store中增加两个变量isShowLoading变量用来控制是否 显示loading、loadingCount,用来计算请求次数
2.增加两个方法来对loadingCount进行增减操作
3.修改axios拦截器
4.在App.vue中处理是否显示loading
vue组件传值
1、父向子传值使用props;
2、子向父传值使用attrs/$listeners”方法进行跨级传值。
5.ref
单向数据流
方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。 Vue中的单向数据流是针对基本数据类型,而引用类型是对数据地址的引入
路由拦截
路由拦截是通过vue-router的beforeEach方法在发生变化时进行每一次路由访问需要进行的拦截处理,。判断拦截信息中是否有鉴权要求或者权限校验,以此来实现鉴权。如果权限不够,访问的路径虽然存在但会被拦截。
比如跳转某个页面内要判断是否有登录等
登录流程
1.在登录页点击登录的时候,前端会带着用户名和密码去调用后端的登录接口
2.后端收到请求,验证用户名和密码,若验证失败,返回错误信息,前端提示相应的错误信息。如果验证成功,就会给前端返回一个token
3.前端拿到token,将token存储到vuex和localStorage中,并跳转页面,即登录成功
4.前端每次跳转至需要具备登录状态页面时,都需要判断当前token是否存在,不存在就跳转到登录页,存在则正常跳转(通常封装在路由守卫中)
5.最后,前端在向后端发送其他请求的时候,需要在请求头中带上token(项目中通常封装在请求拦截器中),后端判断请求头中有无token,有则验证该token,验证成功就正常返回数据,验证失败(如已过期)则返回相应错误码。前端拿到错误信息,清除token并回退至登录页
延申
1.这个token的值是我们在登录也就是login.vue这个页面从后端获得的。但是我们利用这个token值获取用户信息是在另一个页面(个人中心,我的)。也就是说我们在登录页面获取token,在“我的”页面通过token请求用户名放到对应位置
2.在登录界面我们主要是通过localstorage来把token值存到本地。
3.什么时候在localStorage中取token?
在created中,此时数据已经创建完毕,可以在localStorage中拿到持久化存储的token
持久化存储
localStorage、插件
组件模块化开发的优点
使用模块化开发能解决文件之间的依赖关系
可以避免命名的冲突
能进行代码的复用
ajax的请求方式
1、使用“$.ajax()”,可返回其创建的XMLHttpRequest对象;2、通过远程HTTP GET请求载入信息;3、通过远程HTTP POST请求载入信息;4、通过HTTP GET请求载入JSON数据。
get和post区别
post请求更安全,发送的数据更大,能发送更多的数据类型,post请求放在request body中传递
get请求的是静态资源,则会缓存,如果是数据,则不会缓存,get请求有url长度限制,get请求只能发送ASCII字符,get请求参数通过url传递
css隐藏元素的方式
1、设置“display:none”语句;
2、设置“visibility:hidden”语句;
3、设置“opacity:0”语句;
4、设置盒模型属性为0;
5、利用“position:absolute;top:-9999px;”语句。
垂直居中方式
display:flex
grid
使用绝对定位和transform
绝对定位结合margin: auto`
padding实现子元素的垂直居中
js声明变量的方式
var 存在变量提升,声明的变量为全局变量,不存在块级作用域,可以跨块访问, 不能跨函数访问
let、const具有块级作用域用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。存在暂时性死区,不存在变量提升
const用来定义常量,使用时必须初始化(即必须赋值)
vue2和vue3的区别
1、vue2的双向数据绑定利用了ES5的API Object.definePropert(),而vue3中使用了es6的API Proxy;
2、Vue3支持碎片,而vue2不支持;
3、 Vue2使用选项类型API,而Vue3使用合成型API;
4、建立数据,vue2把数据放入数据属性中,而Vue3使用setup()方法;
5、vue3有Teleport组件,vue2没有。
普通函数和箭头函数的区别
1:写法不一样
2:普通函数存在变量提升的现象
3:箭头函数不能作为构造函数使用
4:两者this的指向不同
5:箭头函数的arguments指向它的父级函数所在作用域的arguments
6:箭头函数没有new.target
http和https的区别
HTTP协议以明文方式发送内容,不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息。https则是具有安全性的ssl加密传输协议。http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。并且https协议需要到ca申请证书。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全。
es6新特性
新增了let和const具有块级作用域,不存在变量提升的问题。
新增了箭头函数,简化了定义函数的写法,同时可以巧用箭头函数的this、(注意箭头函数本身没有this,它的this取决于外部的环境),
新增了promise解决了回调地域的问题,
新增了模块化、利用import、export来实现导入、导出。
新增了结构赋值,ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
新增了class类的概念,它类似于对象。
vuex模块化
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
vuex组件化和模块化的区别
模块化:是从代码逻辑的角度进行划分的:方便代码分层开发保证每个功能模块的职能一致。
组件化是从界面的角度进行规划:前端的组件化方便UI组件的重用。
mutation不能使用异步函数
如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。
vue 中key 的作用
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
ts优缺点
优点:
js文件可以直接改成 ts 文件,不定义类型可自动推论类型,可以定义几乎一切类型,ts 编译报错时也可以生成 js 文件,兼容[第三方库],减少bug
缺点:
需要理解接口(Interfaces)和泛型(Generics),类(class),枚举类型(Enums),增加类型定义,和有些库结合时不是很完美
vue3新特性
1、性能比vue2.x快1.2~2倍-Performance;
2、支持tree-shaking-Tree shaking support;
3、引入了Composition API-Composition API;
4、暴露了自定义渲染API-Custom Renderer API;
5、新增三个组件(Fragment、Teleport、Suspense);
6、更好的支持TS-Better TypeScript support;
vue中路由meta的作用
是路由元信息,通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可
map和foreach的区别
map()会分配内存空间存储新数组并返回,forEach()不会返回数据。
深拷贝和浅拷贝
浅拷贝就是指对象复制的时候只复制一层;深拷贝是指复制对象的所有层级。
不同请求方式的区别是什么
1、get:请求指定的页面信息,并返回实体主体
2、post:向指定资源提交数据并进行处理请求。数据被包含在请求体中,post请求可能会导致新的资源的建立或已有资源的修改
3、put:从客户端向服务器传送的数据取代指定的文档的内容
4、Delete:请求服务器删除指定的页面