vue3 手写nextTick

在Vue3中，你可以手写nextTick函数来执行渲染Dom操作。下面是一个示例代码来手写nextTick函数：

let callbacks = [] // 存储回调函数

let pending = false // 表示是否正在执行回调函数

// 执行回调函数
function flushCallbacks() {
  pending = false
  const copies = callbacks.slice(0) // 复制一份回调函数列表
  callbacks.length = 0 // 清空回调函数列表
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// 定义nextTick函数
function nextTick(cb) {
  callbacks.push(cb) // 将回调函数添加到列表中

  if (!pending) {
    pending = true
    Promise.resolve().then(flushCallbacks) // 使用Promise的微任务来异步执行回调函数
  }
}

// 在Vue3中使用自定义的nextTick函数
nextTick(() => {
  // 执行渲染Dom操作的代码
})

在这个示例代码中，我们定义了一个`callbacks`数组来存储回调函数，使用`pending`变量来标记是否正在执行回调函数。`flushCallbacks`函数会在异步任务中执行所有的回调函数。

然后，我们定义了`nextTick`函数，它接收一个回调函数，并将回调函数添加到`callbacks`数组中。如果`pending`为`false`，表示当前没有在执行回调函数，那么我们会将`pending`设置为`true`，并使用Promise的微任务来异步执行`flushCallbacks`函数。

最后，你可以在Vue3中使用自定义的`nextTick`函数来执行渲染Dom操作的代码。调用`nextTick`时，传入的回调函数会被添加到`callbacks`数组中，并在下一个微任务中执行。这样可以确保在下一个事件循环中更新DOM，以保证数据的变化能够正确地渲染到视图上。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [学习vue源码（13）手写 $nextTick](https://blog.csdn.net/weixin_43964148/article/details/106657507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]