zoukankan      html  css  js  c++  java
  • vue.$nextTick实现原理

    源码:

    		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监听的节点变化,从而触发异步方法执行。

  • 相关阅读:
    长按功能实现
    html2canvas使用笔记(站在巨人的肩膀上)
    vue项目中实现复制到剪贴板的函数
    python血坑的注意点
    arcgis
    20210815_fastapi_vue看视频整理
    20210804工作总结
    文献中的优秀表达
    利用mxd文档和切片文件发布地图切片服务
    修改mxd文档的数据源并保存为特定版本
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/13827530.html
Copyright © 2011-2022 走看看