①Ajax和Fetch和Axios有什么区别
Ajax是一种技术统称。Fetch是一个具体的API，Axios是一个第三方库。
Fetch是XMLHttpRequest的一个升级，语言更简洁，支持promise
用XMLHttpRequest实现一个Ajax
②节流和防抖区别和分别用于什么场景
防抖： 防止抖动，先抖动，什么时候停止就执行下一步。场景：用于搜索框。
总结：等待
image-20220703102225410
节流： 节省交互沟通。（别急，一个一个来）场景：scoll 拖拽
总结：按照一定的频率触发事件
③ px 、%、 em、 rem、 vw/vh 有什么区别
都是css的单位
**px：**基本单位，绝对单位；
%: 相对于父元素的宽度比例；
**em：**相对于当前元素的 font-size；
**rem：**相对于根节点的 font-size；（实现移动端适配）
vw： 屏幕宽度的 1%
vh： 屏幕高度的 1%
④ 箭头函数的缺点
- 没有 arguments 参数
- 无法改变this。无法通过 call apply bind 等改变 this
不适用场景：
- 对象方法
- 对象原型
- 构造函数
- 动态上下文
- Vue 生命周期和方法
⑤ TCP 连接 三次握手 四次挥手
**连接：**客户端和服务端通过 HTTP 协议发送请求，并获取内容
HTTP 协议是一个应用层的协议，它只规定了 req 和 res 的数据格式，如状态码、header、body 等。
而建立网络连接需要更加底层的 TCP 协议。
**三次握手：**即建立一次 TCP 连接时，客户端和服务端总共需要发送 3 个包
- 客户端发包，服务端收到。服务端确认：客户端的发送能力是正常的。
- 服务端发包，客户端收到。客户端确认：服务端的接收能力是正常的。
- 客户端发包，服务端收到。服务端确认：客户端即将给我发送数据，我要准备接收
**四次挥手：**挥手告别，就是关闭连接
- 客户端发包，服务端接收。服务端确认：客户端已经请求结束
- 服务端发包，客户端接收。客户端确认：服务端已经收到，我等待它关闭
- 服务端发包：客户端接受。客户端确认：服务端已经发送完成，可以关闭
- 客户端发包，服务端接收。服务端确认：可以关闭了
⑥ for-in 和 for-of 的区别
- for…in 遍历 key , for…of 遍历 value
- for…in 可以遍历对象，for…of 不可以
- for…of 可以遍历 Map/Set ，for…in 不可以
- for…of 可遍历 generator ，for…in 不可以
总结：
- for…in 遍历一个对象的可枚举属性，如对象、数组、字符串。针对属性，所以获得key
- for…of 遍历一个可迭代对象，如数组、字符串、Map/Set 。针对一个迭代对象，所以获得 value
**for await…of 的作用：**用于遍历异步请求的可迭代对象。
// 定义一个promise 的函数 function createTimeoutPromise(val) { return new Promise(resolve => { setTimeout(() => { resolve(val) }, 1000) }) }
// 如果有一个对象，里面有 N 个 promise 对象，可以这样处理 (async function () { const list = [ createTimeoutPromise(10), createTimeoutPromise(20) ] // 第一，使用 Promise.all 执行 Promise.all(list).then(res => console.log(res)) // 第二，使用 for await ... of 遍历执行 for await (let p of list) { console.log(p) } // 注意，如果用 for...of 只能遍历出各个 promise 对象，而不能触发 await 执行 })()
⑦ offsetHeight scrollHeight clientHeight 区别
- offsetHeight - border + padding + content
- clientHeight - padding + content
- scrollHeight - padding + 实际内容的高度
⑧ HTMLCollection 和 NodeList 的区别、Node 和 Element 的区别
- DOM 结构是一棵树，树的所有节点都是 Node ，包括：document，元素，文本，注释，fragment 等
- Element 继承于 Node 。它是所有 html 元素的基类，如 HTMLParagraphElement HTMLDivElement
- HTMLCollection 是 Element 集合，它由获取 Element 的 API 返回
elem.children
document.getElementsByTagName('p')
- NodeList 是 Node 集合，它由获取 Node 的 API 返回
document.querySelectorAll('p')
elem.childNodes
⑨ Vue computed 和 watch 区别
- computed 就已有数据产出新数据，有缓存。如对于一个列表进行 filter 处理
- watch 监听已有数据（如 v-model 时，数据可能被动改变，需要监听才能拿到）
⑩ Vue 组件通讯
props / $emit
适用于父子组件。
- 父组件向子组件传递 props 和事件
- 子组件接收 props ，使用 this.$emit 调用事件
自定义事件
适用于兄弟组件，或者“距离”较远的组件。
常用 API
- 绑定事件 event.on(key, fn) 或 event.once(key, fn)
- 触发事件 event.emit(key, data)
- 解绑事件 event.off(key, fn)
Vue 版本的区别
- Vue 2.x 可以使用 Vue 实例作为自定义事件
- Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter
【注意】组件销毁时记得 off 事件，否则可能会造成内存泄漏
$attrs
$attrs 存储是父组件中传递过来的，且未在 props 和 emits 中定义的属性和事件。
相当于 props 和 emits 的一个补充。
继续向下级传递，可以使用 v-bind="$attrs"。这会在下级组件中渲染 DOM 属性，可以用 inheritAttrs: false 避免。
【注意】Vue3 中移除了 $listeners ，合并到了 $attrs 中。
$parent
通过 this.$parent 可以获取父组件，并可以继续获取属性、调用方法等。
【注意】Vue3 中移除了 $children ，建议使用 $refs
$refs
通过 this.$refs.xxx 可以获取某个子组件，前提是模板中要设置 ref="xxx"。
【注意】要在 mounted 中获取 this.$refs ，不能在 created 中获取。
provide / inject
父子组件通讯方式非常多。如果是多层级的上下级组件通讯，可以使用 provide 和 inject
在上级组件定一个 provide ，下级组件即可通过 inject 接收。
- 传递静态数据直接使用 provide: { x: 10 } 形式
- 传递组件数据需要使用 provide() { return { x: this.xx } } 形式，但做不到响应式
- 响应式需要借助 computed 来支持
Vuex
Vuex 全局数据管理
总结
- 父子组件通讯
props emits this.$emit
$attrs （也可以通过 v-bind="$attrs" 向下级传递）
$parent $refs
- 多级组件上下级
provide inject
- 跨级、全局
自定义事件
Vuex
