原生 JS 开发致命痛点：浏览器重排（回流）
核心原理
浏览器渲染页面时，需要计算 DOM 元素的位置、尺寸、布局结构，这个布局计算过程就叫做 重排（回流）
重排是浏览器性能开销极大的操作， 频繁操作真实 DOM，会触发频繁重排，导致页面卡顿、内存消耗过高。
原生代码的弊端（返例）
原生 JS 中，每一次 DOM 修改都会立即触发一次重排，多次修改就会多次重排：
javascript
const box = document.getElementById('container')
// 每一行修改都触发一次浏览器重排，性能极差
box.innerText = 1
box.innerText = 2
box.innerText = 3总结：原生开发无法批量处理 DOM 更新，频繁操作真实 DOM 是前端性能的核心瓶颈。
Vue 核心优化：虚拟 DOM + Diff 算法
Vue 为解决原生 DOM 性能问题，设计了两层核心优化，从 更新范围 和 更新次数 双重优化。
虚拟 DOM（VDOM）
Vue 不在直接操作真实 DOM，而是用 原生 JS 对象模拟 DOM 结构 （虚拟 DOM）。
JS 操作速度远快于 DOM 操作，所有数据变更先作用在虚拟 DOM 上，规避真实 DOM 的频繁操作。
Diff 算法（精准更新）
数据更新后，Vue 会生成全新的虚拟 DOM 树，通过 Diff 算法 对比新旧虚拟 DOM 的差异
- 只找到 发生改变的节点
- 未变化的节点完全不操作
- 仅将差异部分更新到真实 DOM
作用：实现 最小范围 DOM 更新，极致缩减 DOM 操作开销。
Vue 批量异步更新机制（核心重点）
设计目的
解决「多次数据变更触发多次重排」的问题，合并多次更新，只执行一次 DOM 重排。
核心原理
Vue 的响应式数据更新和 DOM 更新 并不同步，遵循核心规则：
- 数据更新： 同步执行 修改
ref.value后，数据立即同步变更 - DOM更新： 异步微任务执行 Vue 会将同一轮同步代码中的所有数据变更，存入 更新队列，缓存起来不立即更新视图。
- 等待 当前主线程同步代码全部执行完毕，再统一清空队列、一次性更新 DOM，只触发一次重排
经典案例
vue
<template>
<div ref="domRef">{{ count }}</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(1)
const domRef = ref(null)
onMounted(() => {
// 1. 初始 DOM 内容为 1
console.log('初始DOM：', domRef.value.innerText) // 1
// 2. 同步修改响应式数据（数据立即变更）
count.value = 2
// 3. 同步代码立即读取 DOM，拿到旧值（DOM 还未异步更新）
console.log('修改后立即读DOM：', domRef.value.innerText) // 1
// 验证：数据已经同步更新
console.log('最新数据值：', count.value) // 2
})
</script>终极解决方案：nextTick
适用场景
当我们 **修改数据后，需要立即获取最新 DOM、操作最新 DOM ** 时，必须使用 nextTick
核心作用
等待 Vue 异步 DOM 更新队列执行完毕，确保 DOM 完全渲染完成后，在执行后续逻辑。
标准用法（推荐 async/await）
vue
<template>
<div ref="domRef">{{count}}</div>
</template>
<script setup>
import {ref,nextTick,onMounted} from 'vue'
const count = ref(1)
const dom = ref(null)
onMounted(async ()=>{
count.value = 2
console.log('未使用nextTick：', domRef.value.innerText) // 旧值 1
// 等待 DOM 更新完成
await nextTick()
// 获取最新 DOM 内容
console.log('使用nextTick后：',domRef.value.innerText) // 新值 2
})
</script>全套知识点总结
- 原生 DOM 操作会频繁触发浏览器重排，性能消耗极大；
- Vue 通过 虚拟 DOM + Diff 算法实现最小范围更新；
- 通过 批量异步更新机制 实现多次更新合并为一次重排，极致优化性能；
- 数据更新是同步的，DOM 更新是异步微任务；
- 同步代码中修改数据后立即读取 DOM，只能拿到旧值；因为此时更新 DOM 还在微任务中待执行。
- 需要操作最新 DOM，必须使用
nextTick