乐趣区

关于vue.js:vuenextTick使用

vue.$nextTick 应用

前言

在做一个用 v -if 管制 input 暗藏显示的性能时,显示后须要设置 inpu 焦点, 然而 ref 设置焦点时,获取到的却是 undefined。

思路

查找材料后,发现是因为 input 关上后立刻就取查看数据导致的。就是说,在关上显示 input 时,vue 并没有马上去更新 dom 数据,而是先将这个操作放入一个队列中;如果咱们是反复执行的话,队列还会进去反复操作;等同一事件循环中的所有数据变动实现后,再进行解决队列中的数据。

为了在数据更新操作之后操作 dom,所以能够在数据变动之后立刻应用vue.$nextTick,这样回调函数会在 DOM 更新实现后被调用,就能够获取最新的 DOM 元素。

理解 $nextTick

vue 官网文档的解释为:

在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法,获取更新后的 DOM。

简略的了解就是: 当数据更新了, 在 dom 中渲染后, 主动执行该函数。

会用到的小知识点

宏工作(macrotask)
主代码块,setTimeout,setInterval,setImmediate,MessageChannel,postMessage

微工作(microtask)
promise,MutationObserver

工作执行程序以及渲染的执行
macrotask -> microtask -> 渲染 -> macrotask -> microtask -> 渲染 -> ……

源码剖析

const callbacks = []
let pending = false
let timerFunc

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {if (cb) {
      try {cb.call(ctx)
      } catch (e) {handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {_resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()}
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {_resolve = resolve})
  }
}

从这段源码中,能够看到它基本上做的事件就是在 nextTick 的外层定义变量就造成了一个闭包,所以咱们每次调用 $nextTick 的过程其实就是在向 callbacks 新增回调函数的过程。

callbacks 新增回调函数后又执行了 timerFunc 函数,pending用来标识同一个工夫只能执行一次。那么这个 timerFunc 函数是做什么用的呢,咱们持续来看代码:

export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // 判断 1:是否原生反对 Promise
  const p = Promise.resolve()
  timerFunc = () => {p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // 判断 2:是否原生反对 MutationObserver
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {characterData: true})
  timerFunc = () => {counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 判断 3:是否原生反对 setImmediate
  timerFunc = () => {setImmediate(flushCallbacks)
  }
} else {
  // 判断 4:下面都不行,间接用 setTimeout
  timerFunc = () => {setTimeout(flushCallbacks, 0)
  }
}

这里呈现了好几个 isNative 函数,用来判断所传参数是否在以后环境原生就反对。

能够看到这外面是做了四个判断,对以后环境进行一直的降级解决。尝试应用原生的 Promise.thenMutationObserversetImmediate,上述三个都不反对最初应用 setTimeout;

降级解决的目标都是将 flushCallbacks 函数放入微工作 (判断 1 和判断 2) 或者宏工作 (判断 3 和判断 4),期待下一次事件循环时来执行。MutationObserver 是 Html5 的一个新个性,用来监听指标 DOM 构造是否扭转,也就是代码中新建的 textNode;如果扭转了就执行 MutationObserver 构造函数中的回调函数,不过是它是在微工作中执行的。

最初,终于找到了咱们最终须要的flushCallbacks

function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {copies[i]()}
}

它所做的事件也十分的简略,把 callbacks 数组复制一份,而后把 callbacks 置为空,最初把复制进去的数组中的每个函数顺次执行一遍;所以它的作用仅仅是用来执行 callbacks 中的回调函数。

总结

到这里,整个 nextTick 代码剖析结束,总结一下他的流程:

  1. 把回调函数放入 callbacks 期待执行
  2. 将执行函数放到微工作或者宏工作中
  3. 事件循环到了微工作或者宏工作,执行函数顺次执行 callbacks 中的回调

本文自参考

退出移动版