【前端面经】滴滴一面

1.闭包是什么? 闭包的用途?

JS 闭包 2024-3-12
闭包是指在一个函数内部定义的函数，该内部函数可以访问其外部函数的变量和参数。即使外部函数已经执行完毕并返回了，内部函数依然能够访问这些变量和参数。

//举例
function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('Outer variable: ' + outerVariable);
        console.log('Inner variable: ' + innerVariable);
    };
}

const newFunction = outerFunction('outside');
newFunction('inside');
//此时 innerFunction 是一个闭包

闭包最重要的数据封装，比如创建一个私有变量后，只能通过特定的方法读取或修改该变量，这样可以实现封装和保护数据的目的。闭包在工厂函数和回调函数中也很有用，毕竟闭包允许函数在创建时“记住”其定义时的环境。比如异步操作进行时，闭包允许回调函数访问其定义时的作用域中的变量，从而在异步操作完成后使用这些变量。

---

2.简述事件循环原理

现代 JavaScript 通过事件循环机制来处理异步操作。接下来我讲讲流程，刚开始调用栈为空，消息队列为空，事件循环等待。当遇到同步任务执行时，主线程上的同步任务依次被压入调用栈执行。当遇到异步任务（如网络请求、定时器等），这些任务会将回调函数注册到消息队列中，然后立即返回，继续执行同步任务。当调用栈中的所有同步任务执行完毕后（即主线程空闲时），调用栈为空，事件循环开始检查消息队列。事件循环从消息队列中取出第一个回调函数，将其压入调用栈中执行。回调函数执行完毕后，从调用栈中弹出。事件循环继续这个过程，保持调用栈清空并不断从消息队列中取任务执行，直到消息队列为空。
当然异步任务也有优先级，我通常称延时队列和交互队列为宏队列。

• 延时队列：用于存放计时器到达后的回调任务，优先级【中】；
• 交互队列：用户存放用户操作后产生的事件处理任务，优先级【高】；
• 微队列：用户存放需要最快执行的任务，优先级【最高】

---

3.虚拟dom是什么? 原理? 优缺点?

定义：虚拟dom实际上是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。通过虚拟DOM，可以在内存中进行DOM操作，而不是直接操作真实DOM。

原理：
create:每次UI发生变化时，首先创建一个新的虚拟DOM树，表示更新后的UI状态。
Diffing: 将新的虚拟DOM树与上一次渲染的虚拟DOM树进行比较，找出需要更新的部分。
Patching: 根据对比结果，生成最小的修改操作（补丁），只更新需要改变的部分。
Reconciliation: 将补丁应用到真实DOM上，使其同步更新。
优缺点:

优点

• 性能提升：通过在内存中操作虚拟DOM树，减少了直接操作真实DOM的次数，从而提升了性能。
• 跨平台性：虚拟DOM可以抽象为不同平台的实现，例如浏览器、移动设备、服务器等，使得同一套代码可以运行在不同平台上。
• 简单性和可维护性：使用虚拟DOM，开发者可以更专注于描述UI状态，而不用关心如何高效地更新UI。React中的JSX语法使得UI的描述更加直观和简单。
• 调试方便：由于虚拟DOM是一个纯粹的JavaScript对象，调试和测试变得更加方便。

缺点

• 初始渲染开销：虽然虚拟DOM在更新UI时性能很高，但初次渲染时需要创建完整的虚拟DOM树，会有一定的性能开销。
• 内存消耗：虚拟DOM需要额外的内存来存储虚拟DOM树，对于内存敏感的应用可能会有影响。
• 复杂性增加：虽然虚拟DOM抽象了DOM操作，但增加了框架的复杂性，对于一些简单应用可能显得过于复杂。

---

4.vue 双向绑定的原理是什么

双向绑定的原理可以分为两个部分：数据的响应式机制和 DOM 事件监听。
数据响应式: Vue 使用观察者模式，通过数据劫持（Data Hijacking）和发布-订阅模式（Publish-Subscribe）实现数据的响应式。当数据变化时，Vue 会自动更新视图。
DOM事件监听: Vue 通过监听 DOM 事件（如输入框的 input 事件）来捕获用户的输入，并更新数据模型，从而实现视图到数据的同步。

<input v-model="message" />

相当于

<input :value="message" @input="message = $event.target.value" />

工作流程大概分三步:

• 初始化：
  Vue 初始化时，通过数据劫持和依赖收集将数据模型的属性转换为响应式属性。
• 数据变化：
  当数据模型的属性被修改时，触发 set 拦截器，Vue 通知所有依赖这个属性的订阅者更新视图。
• 视图变化：
  当用户在视图中修改输入框的值时，触发 input 事件，Vue 更新数据模型的属性，从而实现数据和视图的同步。

---

5.vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?

作用: keep-alive 是 Vue 提供的一个内置组件，用于缓存不活动的组件实例。主要用于避免组件频繁卸载和重建，提升性能。

核心机制：

1. 组件缓存：

• Vue 在创建组件实例时，会检测是否在 keep-alive 中。如果是，会将组件实例缓存起来。
• 缓存的数据结构是一个键值对，以组件的唯一标识（如 key）为键，组件实例为值。

2. 生命周期钩子：

• keep-alive 组件内部有两个特殊的生命周期钩子：activated 和 deactivated。
• activated：组件从缓存中被激活时调用。
• deactivated：组件被缓存而不是销毁时调用。

刷新 keep-alive 组件:
有时需要刷新被缓存的组件，可以通过以下几种方式实现：

1. key 属性：
   修改组件的 key 属性，强制 Vue 重新创建组件实例
2. 手动触发钩子：
   通过调用组件实例的 deactivated 和 activated 方法，手动触发组件的钩子。

---

先写五个明天再更,各位大佬有误请指出 😃