前端面试题整理

HTML

npm和pnpm的区别

pnpm 是一个基于 npm 的包管理工具的替代品。与 npm 相比，pnpm 还具有一些其他的优势。例如，pnpm 可以自动检测并解决依赖关系冲突，可以通过并行安装来加快安装速度，并且可以在安装过程中进行增量更新，以减少网络和磁盘的使用。

总结来说，pnpm 是一个更加高效和快速的包管理工具，可以替代 npm 来管理 JavaScript 项目中的依赖包

语义化：增加代码可读性，有利于搜索引擎识别，爬虫获取更多信息；更好的展示代码结构

script标签中defer和async的区别：

　　相同点：async和defer都是异步加载js

　　不同点：async是立刻执行, defer在元素加载完之后执行 

　　因此, js脚本加上 async或 defer,放在头部可以减少网页的下载加载时间,如果不考虑兼容性,可以用于优化页面加载的性能

webSocket：因为http是客户端到服务端的单向通信，如果服务器有变化，客户端就得不断向服务器发出询问，效率低且占内存，

　　　　　　所以就诞生了webSocket这种服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息的双向通信模式

　　　　　　webSocket在创建的时候必须传入一个url，发送数据用send()，只能发送字符串，服务器返回的数据在event.data中，也是字符串格式

　　　　　　要关闭连接用close()

http和https的区别：HTTP协议以明文方式发送内容，不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。https则是具有安全性的ssl加密传输协议。

　　　　　　　　   http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。并且https协议需要到ca申请证书。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、

　　　　　　　　   身份认证的网络协议，要比http协议安全。

CSS

回流：无论通过什么方式影响了元素在视图窗口内的位置和尺寸大小，浏览器需要重新计算元素在视图窗口内的几何属性，这个过程叫做回流

重绘：通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的元素在视口内的位置和尺寸大小，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，

　　　这个阶段就叫做重绘

css选择器：.class、#id、标签选择器、伪类选择器......

盒模型：盒模型分为标准盒模型和IE盒模型，两者都由content + padding + border + margin构成，区别在于content的计算不同，标准盒模型是content，IE盒模型是content+padding+border

水平垂直居中：绝对定位、flex、grid布局、table-cell + vertical-align + inline-block/margin: auto

子元素设置position：absolute，如果父元素设置了position那么就依照父元素做定位，如果父元素没设置就向上一级寻找，直到body停止

vh vw rem em 分别是什么

px代表物理屏幕上能显示出的最小的一个点,

em 是相对于父级的字体大小,

rem是相对于HTML根元素的字体大小,

vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

BFC规则

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

产生

1、根标签(html)

2、float的值不为none

3、overflow的值不为visible

4、display的值为inline-block

5、position的值为absolute或fixed

特点

1、属于同一个BFC的两个块元素，垂直margin兄弟关系会折叠（正数以大值为准，有负数正常加减），父子关系会塌陷。

2、BFC区域不会与float的标签区域重叠。

3、浮动的标签也会被计算BFC高度。

4、BFC是独立容器，内部标签不会影响到外部标签。

作用

防止塌陷；自适应两栏布局；清浮动

css预处理器的好处：提高样式效率；可维护性；更高的可读性；缺点： 增加代码复杂度；无法完全避免编码错误

less和sass区别

1. 编译环境不一样 Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。

2. 变量符不一样，Less是@，而Scss是$。

3. 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. 引用外部CSS文件 css@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件.

6. Sass和Less的工具库不同 Sass有工具库Compass, Less有UI组件库Bootstrap.

JS

new关键字是开辟一个存储空间

数据类型：number、string、boolean、undefined、null、function、array、object（es6新增symbol：代表独一无二的值，最大的用法是用来定义对象的唯一属性名）

判断数据类型的方法：typeof（typeof判断不出object和null，因为null被认为是一个空对象，返回都是object，array也判断不出，array用isArray判断），

instanceof  判断数据是否是某个对象的实例，返回一个布尔值，不能检测null和undefined

普通类型（值类型）的数据类型在定义的时候存在栈中，是一个值可以直接用；复杂类型的数据类型在定义的时候存在堆里面，是一个地址需要引用所以也叫引用类型

垃圾回收机制

垃圾回收器：

    浏览器中有个专门的线程，它每隔很短的时间就会运行一次

    主要工作：判断一个对象是否是垃圾对象，如果是，清除其内存数据，并标记内存是空闲状态

如何判断对象是垃圾对象呢？

    机制1：引用计数法

    机制2：标记-清除法

垃圾回收机制1：引用计数法

    最初级的垃圾收集算法，现在都不用了，把“对象是否不再需要”简化定义为“对象有没有引用指向它”。

    每一个对象都标记一下引用它的总个数，如果引用个数为0时，即为垃圾对象。

    有循环引用问题：如果2个对象内部存在相互引用，断开对象的引用后(就是为null)，它们还不是垃圾对象

垃圾回收机制2：标记-清除法

    当前垃圾回收算法的基础，它的“对象是否不再需要”简化定义为“对象是否可以获得”

    从跟对象(也就是window)开始查找所有引用的对象，并标记为“使用中”，没有标记为使用中的对象就是垃圾对象

    没有循环引用的问题

var、let、const三者的区别：

var在同一作用域中可重复定义相同的变量名，变量值是最后一次定义的值，存在变量 提升；

let，const不能在同一作用域中重复定义相同的变量命，只在最靠近的一个块中有效不存在变量提升，let可以定义变量也可以定义常量，const定义的简单类型的数据不能修改可以修改数组或对象中的元素

this

（1）全局环境中，this默认绑定到window

（2）函数独立调用时，this默认绑定到window

（3）new调用，this是新建的对象

（4）箭头函数中的this是外部作用域中的this

（5）可以通过call()/apply()修改this指向

call,apply,bind的区别

相同点：  都是改变this指向的，都不会修改原先函数的this指向；

第一个参数都是this要指向的对象；

都可以利用后续参数传参

不同点：call和bind传的参数都是一一对应的

apply只有两个参数，第二个参数为数组

call和apply都是对函数进行直接调用，而bind方法返回的仍是一个函数

call和apply是改变后页面加载之后就立即执行，是同步代码。

bind是异步代码，改变后不会立即执行；而是返回一个新的函数

call、apply只是临时的修改一次，也就是call和apply方法的那一次；

bind是永久修改函数this指向，但是它修改的不是原来的函数；而是返回一个修改过后新的函数，此函数的this永远被改变了，绑定了就修改不了

宏任务和微任务的概念和执行逻辑

Js是由上而下执行的，在执行过程中会出现异步和同步的现象。宏任务是由浏览器或者node发起的，而微任务由JavaScript自身发起。

执行：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步 微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任 务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程 执行，一直循环直至所有任务执行完毕（以上过程即为事件循环）

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上

具体参考（https://blog.csdn.net/weixin_53291256/article/details/131697929）

事件委托：就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。事件委托的关系是将子元素的事件委托到父元素上。

深浅拷贝

深拷贝：拷贝过程中会创造另一个一摸一样的对象，新旧对象不共享内存，改变新对象原对象不会改变，比如JSON.parse() 和 JSON.stringify()

浅拷贝：只拷贝基本的数据类型，不复制对象本身，新旧对象公用内存，比如赋值

cookie / localStorage/ sessionStorage的区别  

共同点：都是保存在浏览器端、且同源的 

Setitem/gititem  localStorage/ sessionStorage

getCookie  cookie

区别： 

localStorage:最大的容量是5M,是H5新增的特性,本地存储的一个方案,不会每次都会和后台进行交互,除非手动删除,否则一直存在,缓存的数据在同源的窗口是共享的

sessionStorage:也是h5新增的特性,不回每次和台进行交互,,关闭浏览器,缓存失效,在同源的窗口是共享的

cookie:容量是4k每次都会和后台进行交互,可以设置过期时间,如果不设置过期时间那么视为随着浏览器窗口关闭而消失,如果设置了cookie的过期时间那么会把cookie保存在硬盘上,关闭后打开仍然有效,在同源的窗口是共享的,并且是始终在请求中携带

跨域 

原因同源策略: 协议 域名 端口号

浏览器允许发起跨域请求,但是跨域请求的数据会被拦截

JsonP : 浏览器未对script标签没有采取同源策略

（1）前端利用了script发跨域请求【get】，自己定义一个function，function的参数是需要的数据，发请求的时候带着这个function的函数名；

（2）服务器接收到这个请求，在返回结果的时候，用接收到的函数名包裹数据返回，就是相当于服务器响应后直接调用前端定义的function,将前端需要的数据作为入参传进去

CORS：添加请求头信息实现跨域

Proxy：服务器代理

具体 https://blog.csdn.net/weixin_62889848/article/details/128559799

HTTP请求的常用响应状态码及解决方法

200   （成功）  服务器已成功处理了请求

301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

302   （重定向）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303   （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

403   （禁止） 服务器拒绝请求。

404   （未找到） 服务器找不到请求的网页。

405   （方法禁用） 禁用请求中指定的方法。

502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。

503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。

504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。

Post请求及get请求

都是HTTP发送的请求方式

区别 :1.get请求时获取资源

 2.post请求是交换资源

3.传输数据量上,get请求是受浏览器的url限制的,而post请求数据一般不在url上不受限制

4.get请求是明文传输,post请求相对安全一些

5.缓存问题

promise

ES6推出的更好的异步编程解决方案，通过promise.then的链式调用解决嵌套回调的回调地狱问题

promise对象有三种状态：pending、resolved、rejected

promise状态的两种变化 pending-->resolved、pending-->rejected

通过调用resolve()、调用reject()、throw error改变promise的状态

Promise.all([p1,p2,p3])

    接收包含多个promise的数组，返回一个新的promise

    只有当所有接收的promise都成功了，返回的promise才成功，且成功的value为所有成功promise的value组成的数组

    一旦有一个失败了，返回的promise就失败了，且失败的reason就是失败promise的reason

Promise.race([p1,p2,p3])

    接收包含多个promise的数组，返回一个新的promise

    返回的promise的结果由第一个完成的promise决定

作用域

用来规定代码作用的范围及变量查询的范围

①全局作用域：变量在函数或者代码块以外定义，即为全局作用域

②局部作用域：也叫函数作用域，在函数内部定义的变量，即为局部作用域，对外是封闭的，从外层的作用域是无法直接访问函数内部的作用域。且在声明变量时，一定要使用var命令，如果不用相当于声明了一个全局变量

    注意：只要函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”

③块级作用域：Es6新增的，比如if(){}大括号就是‘块’，这个里边的变量就是拥有块级作用域，

 一个变量可以合法使用的范围/区域

     作用域起到了隔离变量，避免了变量重名冲突的问题（也就是允许了不同作用域中可以有同名的变量）

     分类:全局作用域、函数作用域（局部作用域）、块级作用域====>ES6的let或const变量

多个嵌套的作用域形成的由内向外的结构，用于查找变量

    本质：包含由内向外的多个变量对象的数组

    当查找一个变量，在整个作用域链中都找不到时：会报引用错误（RefrenceError),错误信息（message)为这个变量没有定义

变量提升

    变量声明提升:变量的声明部分被提升到了作用域的最前面执行 ===>  预解析

    结果/现象：在变量声明语句前，就可以访问这个变量，只是值为undefined

函数提升：

    函数声明提升：函数声明语句被提升到了作用域的最前边执行 ===>预解析

    结果/现象：在函数声明语句前，就可以调用这个函数了

扩展说明：

    let/count变量没有变量提升

    同名的变量与函数：内部先提升函数，变量被忽略 ===> 这样只用赋值一次

    例：var c = 3     funcetin c(){}   //先提升函数，再提升变量，但是变量c会被忽略

闭包：

        1、为什么会产生闭包？

         出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

        2、什么是闭包

            闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

        3、什么时候产生闭包

            当嵌套的内部函数引用了外部函数的变量时就产生了闭包

        4、闭包的作用

            延长局部变量的生命周期

            让函数外部能操作内部的局部变量

原型

    每个函数都有一个显示原型属性：prototype；

    每个实例都有一个隐式原型属性：__proto__；

    实例__proto__与对应的prototype都指向原型对象；

    函数的默认的原型对象是Object的实例，也就是一个{}；

    原型对象上有一个constructor属性指向对应的构造函数；

原型链

    从对象的__proto__开始，连接的所有对象，也可称为“隐式原型链

原型链的作用：

    1、在查找对象属性或调用对象方法时，会先在对象自身上查找，找不到就会沿着原型链查找

    2、利用原型链可以实现继承

同步：

    1、从上往下按顺序依次执行

    2、只有一个任务完全执行后，才执行后面的

    3、会阻塞后面的代码执行

异步：

    1、启动任务后，立即向下继续执行，等同步代码执行后才执行回调函数

    2、不会阻塞后面的代码执行

    3、异步回调即使触发了，也是要先放入队列中执行，只有当同步任务或前面的异步任务执行完才执行

history与hash路由的区别和原理

区别：

    1、history:路由路径没有#，刷新会携带路由路径，默认会出404问题，需要配置返回首页

        -404：

           history有：刷新请求时会携带前台路由路径，没有对应的资源返回

           hash没有：刷新请求时不会携带#路由路径

        -解决：

           开发环境：如果是脚手架，项目本身就配置好

           ==> webpack ==> devServer：{historyApiFallback：true}

        -生产环境打包运行：

           配置nginx

              location / {

              try_files $uri $uri/ /index.html; 所有404的 请求都返回index页面

              }

    2、hash:路由路径带#，刷新不会携带路由路径，请求的总是根路径，返回首页，没有404

原理：

   history:内部利用的是history对象的pushState()和replaceState()

   hash:内部利用的是location对象的hash语法

     　写hash路径location.hash = '#/xxx'

        读hash路径：location.hash

        监视hash路径的变化：window.onhashchange =() =>{}

http请求方式

get：发送一个请求来取得服务器上的某一资源

post：指定的资源提交数据或附加新的数据

put：指定的资源提交数据或附加新的数据，方法指向了资源在服务器上的位置

delete：删除服务器上的某资源

工程化模块化

一切以提高效率，降低成本，保证质量的手段都可以叫做工程化

工程化分为模块化，组件化，规范化，自动化

模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。

一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块

模块化开发的4点好处：

　　1 避免变量污染，命名冲突

　　2  提高代码复用率

　　3 提高维护性

　　4 依赖关系的管理

git常用命令

git init - 初始化仓库。

git add . - 添加文件到暂存区。

git commit - 将暂存区内容添加到仓库中

git merge 用来合并一个或者多个分支到你已经检出的分支中

1、分支创建 git branch (+分支名称)

2、查看分支 git branch

3、切换分支 git checkout (分支名)

4、合并分支 git merge(分支名)

5、删除分支 git branch -d (分支名)

6、创建并切换 git checkout -b (分支名)

git reset –hard 版本回滚

git pull 本地与服务器端同步

git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。

数组、对象方法

array.concat合并 返回新数组 不改变原数组

Array.prototype.filter() 过滤  返回新数组

Array.prototype.find() 顾虑符合条件的第一个值

Array.prototype.flat() 递归遍历数组合并数组(不会去重)

Array.prototype.includes()  判断是否有莫一个值  返回布尔值

Array.prototype.indexOf() 查找目标元素索引 查不到返回-1

array.isArray 判断给定值是否为数组

Array.prototype.join() 拼接数组 返回字符串

Array.prototype.map() 加工数组 返回新数组

Array.prototype.reduce()

Array.prototype.slice()  切割数组

Array.prototype.toString() 返回这个数组的字符串

Array.prototype.splice() 增删改一体

Array.prototype.sort() 数组排序 更改原数组

Array.prototype.fill() 填充数组 改变原数组

Array.prototype.reverse()反转数组 改变原数组

Array.prototype.push() 末尾增  改变原数组

Array.prototype.unshift() 头增 改变原数组

 

Object.freeze()  冻结对象

Object.assign() 合并对象

js和ts的区别

ts有类型安全功能能在编码期间检测错误，这为开发人员创建了一个更高效的编码和调试过程。

ts增加了void，枚举，any，never等类型

ts 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中

ts中interface和type的区别

interface：接口，TS 设计出来主要用于定义【对象类型】，可以对【对象】的形状进行描述。
type ：类型别名，为类型创建一个新名称。它并不是一个类型，只是一个别名。

主要区别在于 type 一旦定义就不能再添加新的属性，而 interface 总是可扩展的

VUE

vue和react的区别

共同点

数据驱动视图，组件化，都使用虚拟dom

不同点

vue是灵活易用的渐进式框架，它对侦测数据的变化更敏感、更精确

React推崇函数式编程（纯组件），数据不可变以及单向数据流

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 js 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式

双向绑定原理不同：react是通过setState修改数据

webpack

本质上就是打包工具，不是框架也不是库。

webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 webpack 可以处理的模块。

Loader  因为 Webpack 只认识 JS，所以 Loader 将其他类型的资源进行转译的预处理工作。

Plugin 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

Vue 的生命周期。

Vue：beforCreated()创建之前，可用于loading加载阶段

Created（）创建后，常用来调接口

 beforMounte（）dom加载前

 Mounted（）dom加载完成

beforUpdated（）数据更新页面没更新

Updated（）数据页面都更新了

beforDestroyed（）销毁前，数据和方法还可以用

Destroyed（）销毁后，组件销毁，数据方法不可用

### Vue父子组件的生命周期顺序

```

初始化:

  - beforeCreate

  - created

  - beforeMount

  - *--child beforeCreate*

  - *--child created*

  - *--child beforeMount*

  - *--child mounted*

  - mounted

- 更新:

  - beforeUpdate

  - *--child beforeUpdate*

  - *--child updated*

  - updated

- 死亡:

  - beforeDestroy

  - *-- child beforeDestroy*

  - *-- child destroyed*

  - destroyed

```

在第二次进入组件时，因为复用等原因有的生命周期函数不会被加载，此时可以用watch监听路由或者actived钩子函数处理

区别v-if与v-show

隐藏: v-if干掉标签, v-show通过样式来隐藏

  - 重新显示: v-if需要重新创建标签对象, v-show只需要修改样式显示出来就可以

  - v-show重新显示更快, 但隐藏时还占用着内存空间: 以空间换时间

  - v-show更适合切换频繁/需要隐藏的DOM结构比较大

为什么v-for与v-if不适合一起使用

每次渲染都会先循环再进行条件判断，使代码运行性能降低

computed与watch以及method的区别

computed与watch的区别:

  计算属性必须同步返回计算结果，而watch中可以在异步操作后更新数据显示

  watch可以进行深度监视，计算属性只是监视了使用到的数据

  选择：

    如果是根据现在的数据同步计算就可以确定要显示的另一个数据 ===> computed

    如果涉及到异步操作/深度监视 ===> watch

    一旦一个数据变化，我们需要做一系列操作 ===> watch

computed与method的区别:

  计算属性有缓存，多次读取显示只计算一次

  method,多处显示计算多次没缓存

keep-alive

缓存动态组件, 可以通过include或exclude指定只缓存特定组件

使用<keep-alive>也可以缓存路由组件

Vue组件间有哪些通信方式

    1) 父向子

        props(非函数)

        v-model

        $refs, $children

        插槽

    2) 子向父

        props(函数)  

        vue自定义事件

        v-model

        .sync    

        $parent

        作用域插槽

    3) 祖孙间

        $attrs与$listeners    与v-bind/v-on配合使用

        provide与inject

    4) 兄弟或其它/任意

        全局事件总线

        Vuex

       

    另一种方式

    1)属性相关

        props、v-model、$attr与$listeners、作用域插槽(子向父传递)

    2)自定义事件相关

        自定义事件、全局事件总线、v-model、.sync

    3)其他

        $refs,$children,$paret

        provide与inject,插槽，vuex

mvc和mvvm

M - Model：模型，是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据

V - View: 视图，是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的。

C - Controller: 控制器, 是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据

M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑

V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来

VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和Model 的对象，连接 Model 和 View

vue双向绑定原理

通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

订阅者发布者

提前写好n个方法，在未来的某个时间段执行

路由守卫

全局路由守卫router.beforeEnter((to,from,next)=>{})，进路由前使用、router.afterEnter((to,from,next)=>{})进路由后使用

组件守卫beforeRouteEnter((to,from,next)=>{})，进组件时调用，beforeRouteLeave((to,from,next)=>{})，离开组件时调用

组件独享守卫beforeEnter((to,from,next)=>{})进入组件时被调用,区别就在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

State提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data，通过this.$store.state获取

mutations ： 使用它来修改数据(类似于methods)，通过this.$store.commit('方法名')提交mutations中的方法来更改状 态

getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

actions： 发起异步请求，通过提交mutation来实现，可以包含异步操作，通过 this.$store.dispatch('方法名')分发action

modules： 模块拆分

优点：集中管理共享的数据,易于开发和后期维护；Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发响应式的渲染页面更新；

限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

缺点：刷新浏览器，vuex中的state会重新变为初始状态 ；解决方案-插件 vuex-persistedstate

vue中为什么将数据定义在data里：

集中保存有利于管理；data里的属性可以被组件中的其他模块访问；Vue的响应式系统需要监视组件的数据变化，只有data属性中的属性才会被监视。

data中的数据写在return中是因为不使用return包裹，数据是全局可见，容易造成污染，包裹后是当前组件可见。

因为vue组件可以复用，为了防止data被复用，data就被定义为了函数

vue3初始数据在setup中定义一个返回对象存放

vue路由传参，query和params的区别
query用path编写传参地址，而params用name编写传参地址；query刷新页面时参数不会消失，而params刷新页面时参数会消失；query传的参数会显示在url地址栏中，而params传参不会显示在地址栏中。

Vue2及Vue3

利用Proxy(代理) 拦截data属性的操作

利用Reflect(反射) 对被代理对象的相应属性进行操作

组合API

Setup 所有组合API都在这个函数里操作

Ref定义基本数据类型的响应式

Reactive定义引用数据类型的相应式

Computed 定义计算属性

Wactch 监视

Vue3的生命周期函数

setup()方法实在beforeCreate及created前调用的,所以不需要了

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

axios和fatch的区别

 axios传一个对象，里面包含请求url和请求方法，参数

 fetch传两个参数，第一个是请求url，第二个是请求的一些参数

 Axios还有非常好的一点就是会自动对数据进行转化，而Fetch则不同，它需要使用者进行手动转化

axios提供了请求和相应拦截器

Fetch没有拦截器功能，但是要实现该功能并不难，直接重写全局Fetch方法就可以办到

最大的不同点在于Fetch是浏览器原生支持，而Axios需要引入Axios库

React

生命周期

componentWillMount()该方法会创建一个虚拟DOM

componentDidMount()类似Mounted（）在render 之后调用，可获取dom

componentWillUpdate（）数据更新

componentDidUpdate()数据页面更新

componentWillUnmount()销毁前，可用于移除定时器等

项目上常见的hooks

为什么用hooks？组件更好的复用，易拆解测试

useState 初始化数据，初始化只初始化一次，返回一个数组，第一个元素的值，第二个元素是方法

useEffect 内部不能修改 state

useEffect四种状态

useEffect(()=>{})；不传参，不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在

useEffect(()=>{ },[]) 传空数组仅在挂载和卸载的时候执行

useEffect(()=>{ },[count]) //count更新时执行，count是自定义的

useRef用来获取dom节点；返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。

可以把这个ref对象利用元素的ref属性绑定在dom元素上

useContext也就是和 class 组件的 context 同样的效果，将状态传递给孙子组件

useReducer是单个组件状态管理，组件通讯还需要 props

useState和useRef的区别

1:   useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。这种关系更像是js一个经典的案例：for循环中异步打印i的值，let声明的i就相当于每个都是独立作用域，互相之间不会干扰。var则反之。

2：useState值的更新会触发组件重新渲染，而useRef的current不会触发重渲染。

简单来说useState操作数据，useRef操作dom节点

useEffect和useMemo的区别

useMemo第一个参数需要返回一个函数，useEffect也可以返回一个函数
两者第二参数都可以放一个数组，里边的元素有着浅比较触发函数的作用

useMemo是dom更新前触发的，useuseEffect是dom更新后触发的

类组件和函数组件之间的区别
类组件可以使用其他特性，如状态和生命周期钩子，并且他有this

函数组件只能接收props渲染到页面，无状态组件，没有this，不能使用生命周期钩子

函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件

受控组件和非受控组件

受控组件是 React 控制中的组件，并且是表单数据真实的唯一来源。

非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。

react组件传值方法

1.父子传值，2.有共同父组件通过父子传值实现同级传值，3.用useContext传值，4.自定义事件传值

react组件通信

 

redux

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器，Redux严格限制了数据只能在一个方向上流动

所有的数据(state)存储在store中，通过接收组件指令分发一份action，当一个store接收到一个action，它将把这个action代理给相关的reducer。

reducer是一个纯函数，它可以查看之前的状态，执行一个action并且返回一个新的状态

 虚拟dom和diff算法

虚拟DOM其实就是相对于浏览器的真实DOM所渲染出来的一个用来描述真实DOM结构的JS对象

用对象的方式来描述真实的 dom，并且通过对象与真实dom建立了一一对应的关系，那么每次 dom 的更改，我通过找到相应对象，也就找到了相应的dom节点，再对其进行新。这样，就能节省性能，因为js 对象的查询，比对整个dom 树的查询，所消耗的性能要少

Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。

优化

css 放 ，js 脚本放 最底部。

减少 DOM 操作。

手写

求出字符串中所有数字的和

let str = "-2h11v2gfdai123g1325i1l"

    sunStr = (str) => {

        let strArr = str.split("")

        console.log(strArr,11111);//字符串转为数组

        let res = 0

        for(var i = 0;i<strArr.length;i++){

            if(+strArr[i]){

                console.log(strArr[i],22222);//字符串中所有的数字

                res += +strArr[i]

            }

        }

        console.log(res,33333);//求和

        return res

    }

 

自定义节流

function throttle(callback, delay) {

      // 最后一次处理的时间

      let last = 0

      return function (event) { // 真正的事件监听函数

        console.log('throttle')

        // 只有与上次处理的时间差大于delay才处理

        const current = Date.now()

        if (current-last>delay) {

          // 调用callback进行处理

          callback.call(this, event)

          // 将当前时间保存为最一次处理的时间

          last = current

        }

       

      }

    }

自定义防抖

function debounce (callback, delay) {

      let timeoutId

      return function (event) {

        console.log('debounce')

       

        // 如果有未处理的定时器, 清除它

        if (timeoutId) {

          clearTimeout(timeoutId)

        }

       

        // 启动定时器准备在delay时间后处理事件

        timeoutId = setTimeout(() => {

          callback.call(this, event)

          timeoutId = null

        }, delay)

      }

    }

/*

冒泡排序的方法

*/

function bubbleSort (array) {

  // 1.获取数组的长度

  var length = array.length;

  // 2.反向循环, 因此次数越来越少

  for (var i = length - 1; i >= 0; i--) {

    // 3.根据i的次数, 比较循环到i位置

    for (var j = 0; j < i; j++) {

      // 4.如果j位置比j+1位置的数据大, 那么就交换

      if (array[j] > array[j + 1]) {

        // 交换

        // const temp = array[j+1]

        // array[j+1] = array[j]

        // array[j] = temp

        [array[j + 1], array[j]] = [array[j], array[j + 1]];

      }

    }

  }

  return arr;

}