一、vue部分：

1.vue 核心思想：数据驱动与组件化

数据响应式：vue会将data内部对象使用 object.defineproperty() 转为 getter/setter ，当访问或更改这些对象时，同时触发getter/setter，内部对 DOM 进行操作，实现响应式。 vue3.x 中使用 proxy 监听这些对象，而非属性，避免递归循环监听。

2.data 为什么是函数？

避免组件相互影响，data 每次返回的是一个新对象，存放组件内部自己的数据，党内部数据改变时，并不会影响基于组件的其他组件，当组件被多次复用也是有独立数据的，每个组件实例都有自己的状态。

3.keep-alive

保存页面/组件的状态还可以避免组件反复创建和渲染，有效提升系统性能，就是保存组件的渲染状态。

例如：用户在某个列表页面筛选条件得到列表页面数据后，进入详情页查看，当返回列表页我们还期望是用户筛选后的结果，就需要keep-alive

注：kee-alive 之后便不会执行前四个生命周期，增加 activated() 与 deactivated()

4.组件传值

(1).父组件标签属性传值，子组件props 接收，$emit 修改，props/$emit

(2).$emit/$on：公共组件Bus

(3).$attrs/$listeners:

(4).provide/inject

(5).$parent/$children 与 ref

5.computed与watch

computed： 依赖数据的缓存，当数据未改变，则不会重新计算，可以设置 get 与 set。

watch：可以获取新旧值，但是引用类型的值无法获取，也可在内部有异步操作

6.v-for 与 v-if

在同一标签体上时，v-for 先执行，vue 内部判断是先判断 v-for 然后 v-if 如果 v-if 可在外部，则不要和 v-for 统一标签出现，如需内部数据判断，可先对数据进行 computed 计算然后 v-for ，减少 render

7.$nextTick

需要在更新视图之后，基于新的视图进行操作

使用场景：点击按钮获取并显示搜索框，获取焦点/点击显示元素的DOM元素获取

8.路由守卫

全局守卫：

• beforEach 全局前置守卫
• afterEach 全局后置守卫
• beforeResolve 全局解析守卫

独享守卫：beforeEnter 单个路由守卫

组件内部守卫：

• beforeRouterEnter 无法获取组件 this
• beforeRouteUpdate 当前路由改变，但组件被复用时调用；例：foo/1 => foo/2
• beforeRouteLeave 离开后，禁止用户在未保存修改前离开

流程：beforeRouteLeave => beforEach => beforeRouteUpdate => beforeEnter => beforeRouterEnter => beforeResolve => afterEach => mounted => beforeRouterEnter

9.vuex

store：单一状态树标识

mutations：组件使用this.store.commit() 提交mutations

getter：相当于计算属性，getter的返回值会根据依赖缓存，只有当依赖值发生改变，才会被重新计算 this.store.getters 获取，

action：进行异步操作，最终提交 mutation，而不是直接改变状态；使用 this.store.dispatch() 触发action

二、js与浏览器等基础知识

1.Es6 新增

(1). let const 块级作用域（只在声明中生效）

(2). 数组与对象的解构

(3).模板字符串，${} 允许换行

(4). 字符串扩展方法 message.startsWith()/endSwith()/includes()

(5). 箭头函数：this 指向，代码优化

(6). 对象字面量增强

=> 对象内部定义function 可省略关键字 function

=> 通过 [] 使表达式作为数组

=> 键值相等可省略值

(7). 对象的扩展方法：object.assign() object.is() Proxy

(8). class 类

(9). Set 与 Map 数据结构：

Set： Set 集合的值是唯一的，可用来去重；例如：let s = new Set(); s.size()；s.has('100')；s.delete('s')；s.clear();let result = [...new Set(arr)]; => 数组去重

Map：类似于对象，但是健可以是任意类型 WeakMap 弱引用版本；let m = new Map(); m.set(健，值)；m.get(健)；m.has()；m.delete()；m.clear()；m.forEach();

(10). symbol()：全新原始数据类型 Object.getOwnPropertySymbol(obj)

(11). for-of：可遍历任意一种数据类型，可中断，也可遍历 Set 与 Map

(12). iterable

(13). generator

(14). promise

2.深拷贝&浅拷贝

实现深拷贝 Json.stringify() Json.parse()

3.关于this：

(1). 沿着作用域向上寻找最近的一个 function （不包含箭头函数），查看它的调用者

(2). 正常调用 foo() , 指向 window；严格模式指向undefined；方法调用，谁调用指向谁；

(3). 构造函数调用指向构造函数本身

(4). 特殊调用 foo.call() apply() bind()

4.事件委托&&事件监听&&事件捕获&&事件冒泡

事件捕获：从最外层到最内层

事件冒泡：默认事件在冒泡阶段触发啊，从内在外；事件触发阶段的 e.target() 是点击的元素

事件委托：子集的事件委托父级处理（处理 e.target() ）

事件监听：可以给相同 DOM 添加事件/移除事件，还可以设置触发阶段

5.js数据类型判断

typeOf：string Number boolean symbol bigint undefined object(null) function

instanceOf：Object Function Array Date RegExp => 也是object；判断实例是否是父类型/祖先类型的实例

constructor：string Boolean Number Function Date Error Array HTMLDocument window object

Object.protoType.toString.call()：最准确的类型判断

6.for in 与 for of 的区别：

for in ：更适合遍历对象，（数组也可遍历，但是遍历的是下标值），可以遍历到原型上的属性与方法（所有可枚举的属性，遍历健名）

for of：优化版，更适用于遍历数组，不可遍历没有迭代器的对象，遍历的是数组元素，不包括原型上的属性与方法，可遍历字符串

7.循环方式

for/优化版：len = arr.length

forEach / map

object.keys()

Object.getOwnPropertyNames()

Reflect.ownKeys()

8.在浏览器输入 URL 后

(1).浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址

(2).解析出 IP 地址后，根据该 IP 地址和默认端口 80 ，和服务器建立 TCP 连接

(3).浏览器发出读取文件（URL 中域名后面部分对应的文件）的 HTTP 请求，该请求报文作为 TCP 三次挥手的第三个报文的数据发送给服务器

(4).服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器

(5).释放 TCP 连接

(6).浏览器将该 html 文本并显示内容

(7).浏览器将获取的 HTML 文档解析成 DOM 树

(8).处理 CSS 标记，构成层叠样式表模型 CSSOM

(9).将 DOM 和 CSSOM 合并成渲染树（rendering tree），将会被创建，代表一系列渲染对象

9.浏览器缓存

(1).强缓存：所请求的数据在缓存数据库中尚未过期时，不与服务器交互，直接使用缓存数据库中的数据，header 头 expires资源失效时间；cache-control 资源有效期或者缓存方式

(2).协商缓存：当强缓存过期未命中或者响应报文 Cache-Control 中有 must-redalidate 标识必须每次请求验证资源状态时，便使用协商缓存的方式去处理缓存文件。从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是否已经更新，如果已更新则返回新的数据。若未更新则使用缓存数据库中的缓存数据。

注：强缓存不过服务器，协商缓存需要过服务器，可同时存在，强缓存优先级高，当执行强缓存，若命中缓存则直接使用缓存数据库中的数据，不再进行缓存协商。

10.跨域

(1).修改响应头：Access-Control-Allow-Origin 后端

(2).JSONP：只有 Ajax 请求存在跨域

11.防抖与节流

(1).防抖：用户触发事件过于频繁时，只要最后一次事件的操作

(2).节流：控制执行次数

12.原型

(1).原型：任何一个 JS 对象都有一个原型对象 prto ，可以使用自己原型对象上的属性与方法，1> 通过对象的proto 获取；2> 通过构造函数的 protoType 属性获取；运用：用原型扩展对象上的属性与方法；3> 通过类的 protoType

(2).类与继承：子类可以继承父类的属性与方法（extend）

(3).原型继承：protoType 可以实现原型继承（通过构造函数的 proType）

(4).原型链：对象有原型，当调用方法或访问属性时，如果对象内部无，则去原型对象上找，会一直找到 Object 对象这个，形成原型链

13.call apply bind

call( param1, param2, param3)

call 可以改变 Animal 构造函数的 this : apply( cat,[ num1, num2]) Animal.call(this) 可以实现多重继承

14.事件循环

process.nextTick() setImmediate 方法

process.nextTick() 同步代码执行之后，异步代码执行之前运行（callback）

setImmediate() 异步代码执行之后执行 => 当前事件循环结束后执行

eventLoop：代码运行时，同步代码会直接放入运行栈，异步代码会放入任务队列中执行，将回调放入消息队列，当调用栈没有工作，也就是说同步代码已执行完毕，eventLoop 发挥作用，只做1件事情负责监听调用栈和消息队列，当调用栈没有任务，event 将消息队列中的异步任务放入调用栈执行

宏任务、微任务：宏：计时器、ajax、读取文件；微：promise.then （new Promise（同步）、then（异步））

同步=> process.nextTick() => 微任务 => 宏任务 => setImmediate

15.TCP 协议

TCP 工作在传输层，在程序之间传输数据；三次挥手，传输确认；四次挥手（连接中的客户端与服务端都可以发起关闭连接请求）

目的：在不可靠的信道建立可靠连接

第一次握手：发送 SYN 包，询问能否与服务器建立连接

第二次握手：服务端同意连接，返回 SYN + ACK 包

第三次握手：客户端收到回复 ACK 包，则连接建立（防止已失效的请求报文，传入服务器引起错误）

第一次挥手：客户端发起关闭连接请求，发起 Fin 包表示请求关闭

第二次挥手：服务端接收后发送 ACK ，进入关闭等待状态

第三次挥手：客户端进入等待2状态，服务端发送未发送完数据 Fin 包，进入最后确认状态

第四次挥手：客户端接收回复 ACK 包，进入超时等待状态，经过超时时间后关闭连接，服务端收到 ACK 包，立即关闭连接

16.CORS

浏览器发出 CORS 请求，会增加一个 origin 字段（自动完成）

Access-Control-Allow-Origin 允许访问的资源

17.原型

proto：对象属性，在创建时就会生成（内置属性）原型（本身）；string/number 的原型是 string/number , 它们的原型的原型最终指向 Object

proto.constructor：指向创建a、b、c 的对象（构造a，b，c的对象，string/number）

JS new 一个对象的过程：

(1).创建一个新对象 son

(2).新对象会被执行[[protoType]]连接，son.propt = Mothe.protoType

(3).新对象和函数调用的 this 绑定 => Mother.call(son, "Da")

(4).执行构造函数中的代码

18.继承

(1).原型链继承：per.protoType = new Person()，则per构造函数中有 Person 上的属性方法，则 per instanceOf Person，让子类的原型等于父类的实例

缺点：新实例无法向父类构造函数传参

(2).构造函数继承：Person.call(this, 'jer') 用 call 和 apply 将父类构造函数引入子类函数

(3).组合继承（原型链继承 + 构造函数继承）：缺点：调用2次父类构造函数，子类的构造函数代替父类构造函数

(4).原型式继承：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象 Object.create()

(5).寄生式继承：原型继承外面套壳子

(6).寄生组合式继承：函数内返回对象然后调用

19.Node.js常用库及功能

http 模块：主要用于搭建http服务，处理用户请求信息，创建静态服务器

URL 模块：主要用于处理 url 的地址，方便对统一资源定位符进行操作处理

path 模块：处理磁盘路径，绝对路径

fs 模块：用于文件系统的增删改查

20.webpack常用配置

cache：是否缓存

entry：入口文件

output：输出文件

devtool：开发工具 map =>开发

devServer：开发服务 =>开发

module：loader 规则

plugins：插件配置

mode：模式 => 区分开发和生产

21.axios 拦截器

请求拦截器：在请求发送前进行必要操作处理，例如添加统一cookie，请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；

=> instance.interceptors.request.use(req => {}, err => {})，必须返回 config

响应拦截器：请求得到响应之后，对响应体的一些处理，通常是数据的统一处理等，也常来判断登录失效等。

=> instance.interceptors.reponse.use(req => {},err => {})，返回响应结果