nextTick原理与作用

发表于 分类于 阅读次数： Changyan： 本文字数： 246 阅读时长 ≈ 1 分钟

nextTick 作用

在一轮里，对一个数据进行多次修改时，不会每次都渲染而是一轮结束时渲染。
nextTick里的回调会在当前轮次渲染结束后在执行

1
2
nextTick(()=> {})
nextTick().then()

原理

  1. 在updated生命周期之后立即执行
  2. 为了避免不必要的计算，数据更新会放入微队列，vue会在下一个tick里执行已去重的任务
  3. nextTick本身不会主动触发渲染

兼容

  1. promise
  2. MutationObserver
  3. setInterval
  4. setTimeout