【面试】面试官:nextTick()的原理

使用nextTick()的原因:

JS运行机制(Event Loop)


JS执行是单线程的,它是基于事件循环的

所有同步任务都在主线程上执行,形成一个执行栈。
主线程之外,会存在一个任务队列,只要异步任务有了结果,就在任务队列中放置一个事件。
当执行栈中的所有同步任务执行完后,就会读取任务队列。那些对应的异步任务,会结束等待状态,进入执行栈。
主线程不断重复第三步。

这里主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。
Event Loop分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。

Vue异步更新队列(数据驱动视图)

由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,
只要监听数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。
然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。
等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。
为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。

nextTick():获取更新后的dom内容

created () {
    console.log(111)
    this.$nextTick(() => {
      console.log(333)
    })
  },
  mounted () {
    console.log(222)
    this.$nextTick(() => {
      console.log(444)
    })
  }

执行结果是:

333,444是异步的。

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

nextTick主要使用了宏任务和微任务
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0)代替。

nextTick()用法

  • 全局中: Vue.nextTick
  • 组件中: this.$nextTick

猜你喜欢

转载自blog.csdn.net/qq_46580087/article/details/124794213