几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 526 JAVASCRIPT 鼠标
Vue.nextTick 的实现方法
来源：互联网
2023-03-16 23:57:27 87
event loop和MicroTask 后的vue.nextTick API实现的源码解析。
工具/原料
- JavaScript
方法/步骤
预热，写一个sleep函数。
解释下sleep函数
async 函数进行await PromiseFn()时函数执行是暂停的，我们也知道现在这个PromiseFn是在microTask内执行。当microTask没执行完毕时，后面的macroTask是不会执行的，我们也就通过microTask在event loop的特性实现了一个sleep函数，阻止了console.log的执行
流程
1、执行console.log('start')2、执行await 执行暂停，等待await函数后的PromiseFn在microTask执行完毕3、在sleep函数内，延迟ms返回4、返回resolve后执行console.log('end')
nextTick API
vue中nextTick的使用方法
了解用法后看一下源码。
大致看一下源码可以了解到nextTick api是一个自执行函数
既然是自执行函数，直接看它的return类型，return function queueNextTick (cb, ctx) {...}
只关注主流程queueNextTick函数把我们传入的() => { // todo... } 推入了callbacks内
这一段可以看到标注的三个点表明在不同浏览器环境下使用Promise, MutationObserver或setTimeout(fn, 0) 来执行nextTickHandler
nextTickHandler就是把之前放入callbacks的 () => { // todo... } 在当前tasks内执行。
写一个简单的nextTick
源码可能比较绕，写一段简单的nextTick
可以从这里看出nextTick的原理就是返回出一个Promise，而我们todo的代码在这个Promise中执行，现在我们还可以继续简化
直接写成这样。
现在直接简化到最后，现在发现nextTick最核心的内容就是Promise，一个microtask。
现在回到vue的nextTick API官方示例
原来在vue内数据的更新后dom更新是要在下一个事件循环后执行的。nextTick的使用原则主要就是解决单一事件更新数据后立即操作dom的场景。
知道了nextTick核心是利用microTasks，那么把简化过的nextTick和开头的sleep函数对照一下。
看出nextTick和我么写的oneTick的执行结果是那么的相似。区别只在于nextTick是把callback包裹一个Promise返回并执行，而oneTick是用await执行一个Promise函数，而这个Promise有自己包裹的webapi函数。
那在用ajax请求的时候我们是不是直接这样使用axios可以返回Promise的库
这样也可以达到同nextTick同样的作用
最后也可以从源码中看出，当浏览器环境不支持Promise时可以使用MutationObserver或setTimeout(cb, 0) 来达到同样的效果。但最终的核心是microTask
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 254 JAVASCRIPT
- 详细阅读