响应式：调度

nextTick()

在下一次 DOM 更新周期后执行回调。

类型定义

ts
declare function nextTick(fn?: () => void): Promise<void>

参数

参数类型说明
fn() => void可选的回调函数

返回值

类型说明
Promise<void>DOM 更新完成后解析

示例

回调形式：

ts
import { nextTick, ref } from 'vitarx'

const count = ref(0)
count.value++
nextTick(() => {
  // DOM 已更新
  console.log('DOM updated')
})

异步/await 形式：

ts
count.value++
await nextTick()
// DOM 已更新

flushSync()

立即同步执行调度队列中的所有任务，绕过微任务队列。

类型定义

ts
declare function flushSync(): void

返回值

类型说明
void—

行为说明

  • 按顺序同步执行所有 pre、main、post 队列任务，立即看到更新效果
  • 会阻塞主线程，仅在需要强制同步更新时使用（如同步获取更新后的 DOM）
  • 如果正在刷新中，则跳过执行以避免并发问题

示例

ts
import { flushSync, ref } from 'vitarx'

const count = ref(0)
count.value++
// 此时 DOM 更新还在队列中
flushSync()
// 现在可以同步读取更新后的 DOM
console.log(document.body.innerHTML)

注意：大多数场景应优先使用 nextTick()。仅当必须在同一宏任务内读取更新后的 DOM（如测量布局、同步导出内容）时才使用 flushSync()。