基础的八股

JS

this

全局：this指向window

函数：this指向window

对象：this指向调用它的

get、post的区别

1、写的地方不同：get在地址栏里地址栏有多长就只能写多少、post在请求体里没有上限

2、关于回退和刷新：get回退和刷新没问题 post 会弹窗-是都要重新提交表单

3、get有缓存 post没有

cookie、localstorage、sessionStorage的区别

相同点：都是用来在客户端存储数据的

不同点：

cookie：发一次请求就会携带一次，身上没有方法可以用要是想用就得自己封装，可以设置过期时间(xss攻击了解一下)

localstorage：持久化存储、只要不手动清除就一直在

sessionstorage：会话级别的存储窗口关掉就没有了

localstorage、sessionstorage有一些共有的方法：setItem、getItem、removeItem、clear

深拷贝、浅拷贝的区别

深拷贝：拷贝的是真正的值会为值开辟地址一个改变另一个不受影响（JSON.parse(JSON.stringify()))

浅拷贝：拷贝的是地址引用一个改变另一个也会变（object.assign）

new都做了什么事情

1、肯定是创建一个新对象

2、把构造函数的原型赋值给新对象

3、把构造函数的this赋值给新对象

4、对return出来的东西做判断处理如果是简单数据类型不做处理，如果是复杂数据类型就直接把return 里的东西返回出来就表示 new没用啦

call、apply、bind的区别

相同点：都是来改变this指向的

不同点：

1.执行问题

call 和 apply 都是立即执行的 bind的返回值是一个函数他需要（）调用

2.传参问题：

call 、bind 的参数都是一个一个的传进去，apply的第二个参数是个数组（都放在数组里）

原型和原型链介绍一下

因为在js中是用构造函数来创建对象的，每一个构造函数身上都有一个属性prototype 他的值是一个对象里面包含了所有可以共享的属性啊方法啊这个就叫原型对象

原型链：实例化对象想用某个方法会先从自身去找自身没有会去原型上找原型没有会去原型的原型上一直找找到object身上它的值是个null 从他自身一直到object 连接起来就是原型链

闭包

内层函数+外层变量（函数套函数）

优点：私有变量、私有函数

px、em、rem

px：绝对像素

em：相对于父元素

rem：相对于根元素

ajax二次封装

一些基本配置、响应拦截器、请求拦截器

数组身上的方法

push：末尾添加

pop：末尾删除

shift：头部删除

unshift：头部添加

reverse：翻转

slice：截取

splice：两个参数当删除用三个参数当添加和替换用

字符串身上的方法

split

tocaseupper

toLowcase

includes()

startsWith()

endsWith()

对象身上的方法

js中的栈和堆有什么区别？

存储方式：

栈：

堆：

js和ts的区别

为什么!{}返回false

！遇到非布尔值他会去做类型转换

{}做类型转换任何非空对象在转换布尔值时都是true

undefined、null、false、0、''这几个是false

所以!{}是false

es6

新的基本类型

symbol

作用：解决命名冲突的问题（对象的属性名都是字符串容易造成命名冲突进行覆盖）

他是一个新的数据类型

表示独一无二的值

使用：

Symbol

Symbol.for()

区别：

Symbol.for() 代表如果之前有abc 代表独一无二要是再来一个表示他们是一样的因为在此之前已经注册过了

取值：object.getOwnProtypeSymbols（返回的是数组但他只能拿symbol）

Reflect（可以拿到全部的值有symbol 有不是symbol的他也是数组）以后了解一下

Reflect.ownKeys

bigint

let、const、var的区别

相同点：都是用来声明变量的

不同：

var：全局作用域、存在变量提升（等号左边提上去）、可重复声明

let：块级作用域、不存在变量提升、不可重复声明

const：块级作用域、不存在变量提升、不可重复声明、const 声明的变量地址不可以被修改所以相当于是常量、一旦声明必须赋值

解构赋值

模版字符串

箭头函数

箭头函数和普通函数的区别：

没有自己的this 取的是上层作用域的this

没有argument

不可以被当做构造函数用(就是不能用new)

数组新增的方法

filter

foreach

map

array.from：将类数组的对象转成真正的对象

array.of：将一组值转化成数组（Array.of(3, 11, 8) // [3,11,8] ）

find()

findIndex()

对象新增的方法

assign：合并

is：严格判断两个值是否相等判断+0 -0）

keys：拿object的键名

value：拿object的值

class

module

promise 与 async await

相同点：都是用来处理异步请求的

promise:他有三种状态 padding、resolve、reject 他一旦发出只能等返回结果不可以干涉结果

他有一些可以用的方法resolve() reject() .then() .catch .finallly .error

Promise.all() ⽅法⽤于将多个Promise 实例，包装成⼀个新的Promise 实例

const p = Promise.all([p1, p2, p3]);

async await 他其实是Generator 的语法糖返回的就是一个promise

他两的区别就是 async await 同步代码做异步处理起到一个阻断的作用等返回出来结果再走后面的 promise 会出现没有返回结果就走后面的东西

原理：

generator

他是个函数用来解决异步编程的

格式：let a = function* (){

yield

}

next()：下一步相当于promise中的then

WeakMap和Map

WeakMap：

weakmap的值只能是对象

不可遍历

方法不同（只有四个方法能用）

get、set、has、delete

Map：

本质上是键值对的集合它的key可以是任意内容（数组、数值、对象）

方法：

长度：size

删除：delete、clear

增：set()

查：get()

还可以遍历：

keys()：返回键名的遍历器

values()：返回键值的遍历器

entries()：返回所有成员的遍历器

foreach()：遍历map所有的成员

WeakSet和Set

WeakSet

weakset的值只能是对象

不可遍历

方法不同（只有三个方法能用）

add、has、delete

Set

是一种新的数据结构类似于数组它的值都是唯一的

是个构造函数需要new Set()

方法：

长度：size

删除：delete、clear（全删）

增：add()

查：has()

需要注意的一点 set去重是做=== 加类型判断的

还可以遍历：

keys()：返回键名的遍历器

values()：返回键值的遍历器

entries()：返回所有成员的遍历器

foreach()：遍历set所有的成员

Vue2

介绍一下生命周期

生命周期指的是组件从创建到销毁的整个过程，分别是创建、挂载、更新、销毁，他们对应了8个钩子函数

beforeCreate：创建之前、页面啥也没干呢啥也不能干

created：创建之后、data可以用、dom不能动（如果想在这个阶段操作dom可以卸载定时器、promise、异步里）

beforeMount：挂载之前、data可以用、dom不能动（如果想在这个阶段操作dom可以卸载定时器、promise、异步里）

mounted：挂载之后很成熟啥都能干

beforeupdate：更新之前数据是新的页面是旧的

updated：更新之后数据和页面都是新的

beforedestory：销毁之前

destory：销毁之后（组件和绑定的东西断开连接了不能用了）

介绍一下vue2和vue3里面的双向绑定

vue2：object.defineproperty

他是通过把组件里data return 出来的东西赋值给object大对象，object通过object.defineproperty 劫持它的get和set，一旦发生变动会立即通知vue执行update方法，进行dom节点的更新从而实现双向绑定。因为他是对属性进行监听所以它的弊端就是后续添加进来的属性不可以被监听到（$set）

vue3：proxy

他是通过proxy劫持它的get 和set ，他监听的是整个组件大对象后续添加进来的属性可以劫持到

data为什么要用return？

因为vue讲究的是组件的可复用性组件每被复用一次 data就会被复制一次，写成函数是为了每复用一次组件就会返回一个新的data 让各个组件独立维护互不影响。

如果不写成函数那就相当于不管复用多少次都用一个data 复用的其中一个组件的data变动就会影响别的组件。

vue组件通信

父 -> 子：props

子-> 父：父亲传给孩子一个自定义函数，孩子$emit

兄弟：$bus (on 和emit)

vuex：集中式状态管理

vuex包含五部分：
state：用来存储数据的

action：做异步处理的

mutation：唯一一个可以改变数据状态的（只能同步要是不是同步你就不知道这个值他是什么时候修改的）

getter：给数据做加工处理（应该是可以做异步的）

module：模块化

ref是什么

来获取dom的

computed、watch、methods的区别

computed 和 methods区别

相同点：都可以返回东西

不同点：

computed 计算属性调用一下就会打印返回的结果但是不管调用几次只要值不变他就只会打印一次其他会在缓存里面拿数据

methods 没有缓存调用几次执行几次

watch 和 computed 的区别

相同点：都可以用来监听数据

不同点：

watch：值发生变动了才会执行

computed：只要调用就会执行

vuex刷新后数据会丢失吗？怎么解决

vuex是放在运行内存中的他只要刷新页面肯定是会重新获取数据页面也会丢失数据

解决：

1.把数据直接保存在爱浏览器缓存里（sessionStorage、cookie、localstorage）

2.页面刷新的时候再次请求数据达到可以动态更新的方法

监听浏览器的刷新事件再刷新之前把数据保存到sessionStorage，刷新成功之后再异步的请求，如果请求到了用vuex 如果没有就去sessionStorage中拿

elementui如何做表单验证的

他有一些方法

1、在表单中加rules属性然后在data中写校验规则用props连接

2、内部添加规则页面里直接rules="[]"

3、自定义函数校验（正则表达式）

Vue3

vue3常用的响应式数据类型

ref：基础类型

reactive：复杂类型

toRef：解构单一的值 let name = toRef(obj,'name')

toRefs：解构所有的值 let {name age} = toRefs(obj)

vue3常用的api

createApp() ：创建一个应用实例

等同于vue2的 new Vue() 写插件封装全局组件会使用

provide/inject ：依赖注入

其实就是传值父组件传后代

directive：自定义指令

像后台管理系统中的按钮权限控制（一个用户拥有某些权限但是也只能是查看和修改不能删除）

mixin：混入（可以了解一下hooks ）

app.config.globalProperties：获取vue 这个全局对象的属性和方法

自己封装插件的时候需要把方法插入到对象中

nextTick：可以获取到更新后的dom（等下次刷新dom的工具他返回的是一个promise 回调函数是放在promise中的所以是异步执行的）

computed：计算属性有缓存

reactive、ref：做响应式的类似于vue2中的data

watch：监听

markRaw()：不能被new Proxy代理说白了就是静态数据

defineProps()：当前组件使用setup的形式，需要用defineProps接收

defineEmits：当前组件使用setup的形式，需要用defineEmits提交

slot：插槽（匿名、有名、作用域）

如何用Vue3中setup写法获取vue2里面的this

因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。

因此setup函数中不能使用this。所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了 undefined

所以如果想要在Vue3中使用this， Vue为我们提供了getCurrentInstance（）方法，这个方法返回了ctx和proxy。

全局封装了某个方法需要在某个组建中使用这个属性或者方法就这样整去获取他

import {getCurrentInstance} from '@vue'

let app = getCurrentInstance()

console.log(app .appContext.app.config.globalProperties.$loading)

vue3用setup写组织代码

mixin：写了一些属性、方法可以再全局或者某个组件中使用他是没有template

hooks：他是函数式编程主要解决的问题是分割代码（模块功能细分项目维护性更高）

vue2和vue3的区别

双向绑定方法不同：

vue2：object.defineproperty()

vue：new proxy()

$set在vue3没有因为new proxy()不需要

v-if v-for优先级不同了

v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用

vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突

关于写法

vue2选项是api

vue3可以是选项式也可以是setup语法糖

ref与reactive

生命周期

解构 toRef与toRefs

开放性问题

对模块化开发的理解

如何封装和重用代码？有什么考虑？

组件封装

mixin混入

好好想想吧！

描述一下最近完成的项目以及遇到的难点

项目描述

技术实现

遇到的问题+解决

结果和收获（学会了。。。）

总的来说哈哈哈

其他

什么是xss攻击？怎么防止？

xss：黑客会通过在网站注入script脚本当用户浏览网站的时候脚本会在它的浏览器中执行会去获取用户的信息篡改页面

防止：

输入验证和过滤（只接受正规的输入）

HTTP-only Cookie：禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！再看看

移动端布局的几种方式

流式布局（百分比布局）
flex布局（弹性布局）
Less+rem+媒体查询布局（实际用flexible.js+rem居多）
响应式布局（利用Bootstrap）
混合布局，可以根据不同的组件需求，混用不同布局方式，例如全局使用rem适配，部分盒子使用flex布局。

前端接口如何防止重复提交

可以使用token

后端传过来的token前端通过本地存储保存下来放在http请求的请求头里后端去判断

再看看！！

跨域

axios二次封装

基础

请求拦截器

响应拦截器

git常用的命令

移动端兼容性的问题

1、当设置样式overflow:scroll / auto ios会卡顿

-webkit-overflow-scrolling:touch

2、在安卓环境下placeholder设置行高时会偏上

input有placeholder 属性的时候不要设置行高

3、移动端字体小于12px时异常显示

应该先把整体放大一倍然后再用transform进行缩小

4、ios下input按钮设置了disabled属性为true显示异常

input[type=button]{ opcity:1}

5、安卓手机下取消语音输入按钮

input::-webkit-input-speech-button{

display:none

}

6、ios取消input输入框在输入引文首字母默认大写

<input autocapitalize="off" autocorrect="off">

7、禁用ios和安卓用户选中文字

需要添加全局样式：-webkit-user-select:none

8、禁止ios弹出各种窗口

-webkit-touch-callout:none

9、禁止ios识别长串数字为电话

需要添加meta属性：<meta conten=‘telephone=no’ name='format-detection'>

10.去掉ios被触摸时产生的半透明灰色遮罩层

-webkit-tap-heighlight-color:rgbaa(0,0,0,0)

js为什么要用事件循环

首先js是单线程的单线程有一个阻塞的一个问题浏览器他是通过异步来解决阻塞的问题（settimeout、网络请求）异步是放在队列里面的异步有一个问题是他没有优先级所以为了更灵活一点增加了事件循环机制

事件循环他有同步任务和异步任务一般先同步后异步异步任务有微任务和宏任务先微任务后宏任务每执行完一个宏任务他会去看看微任务队列中有没有微任务如果有先执行微任务再去执行下一个宏任务