vue.$nextTick实现原理

Posted 2020-12-21 yaxinwang

源码：

		const 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]()
		  }
		}
		let timerFunc
		if (typeof Promise !== ‘undefined‘ && isNative(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]‘
		)) {
		  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)) {
		  timerFunc = () => {
		    setImmediate(flushCallbacks)
		  }
		} else {
		  timerFunc = () => {
		    setTimeout(flushCallbacks, 0)
		  }
		}

		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()
		  }
		  if (!cb && typeof Promise !== ‘undefined‘) {
		    return new Promise(resolve => {
		      _resolve = resolve
		    })
		  }
		}

　　总体来说：就是先判断是否支持promise，如果支持promise。就通过Promise.resolve的方法，异步执行方法，如果不支持promise，就判断是否支持MutationObserver。如果支持，就通过MutationObserver（微异步）来异步执行方法，如果MutationObserver还不支持，就通过setTimeout来异步执行方法。

　　MutaionObserver通过创建新的节点，调用timerFunc方法，改变MutationObserver监听的节点变化，从而触发异步方法执行。