From 64a446743884a3f514222a9e0bbba2490f5761d8 Mon Sep 17 00:00:00 2001
From: fxzer <fxzer8888@163.com>
Date: Sun, 4 Aug 2024 14:08:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=96=20=E6=9B=B4=E6=96=B0=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/Interview/Vue/nextTick.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 docs/Interview/Vue/nextTick.md

diff --git a/docs/Interview/Vue/nextTick.md b/docs/Interview/Vue/nextTick.md
new file mode 100644
index 00000000..eaec1e54
--- /dev/null
+++ b/docs/Interview/Vue/nextTick.md
@@ -0,0 +1,15 @@
+> vue3 为什么 nextTick 中就能拿到 DOM 更新后的结果了
+
+在 Vue 3 中，组件的更新过程是异步的。当你更改组件的数据时，Vue 会将这些更改放入一个队列中，并计划重新渲染组件。然而，它不会立即执行这些更新，而是等待当前执行栈清空，然后批量执行所有的更新。这样做可以避免不必要的重复渲染，提高性能。
+
+以下是为什么 `nextTick` 能够获取到 DOM 更新后的结果的几个关键点：
+
+1. **异步更新队列**：Vue 3 使用异步更新队列来处理数据变化和视图更新。当你更改了响应式数据，Vue 会将更新放入队列，而不是立即执行。
+
+2. **微任务（Microtask）**：`nextTick` 利用 JavaScript 的微任务机制来安排回调函数的执行。微任务通常在当前执行栈清空后立即执行，早于宏任务（如 setTimeout、setInterval）。
+
+3. **DOM 更新完成后**：由于 `nextTick` 的回调函数是在微任务中执行的，所以它们会在所有 DOM 更新完成后执行。这意味着你可以在 `nextTick` 的回调中访问更新后的 DOM。
+
+4. **避免不必要的渲染**：通过异步更新和 `nextTick`，Vue 可以避免在同一个事件循环中多次渲染同一个组件，这有助于提高性能。
+
+5. **兼容性和可预测性**：使用 `nextTick` 可以确保你的代码总是在 DOM 更新后执行，这使得代码的行为更加可预测，并且可以避免直接操作 DOM 带来的复杂性。