①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