解析$nextTick魔力,为啥大家都爱它?

这篇具有很好参考价值的文章主要介绍了解析$nextTick魔力,为啥大家都爱它?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.为什么需要使用$nextTick?

首先我们来看看官方对于$nextTick的定义:

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

由于vue的试图渲染是异步的,生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM其实并未进行渲染,而此时进行DOM操作是徒劳的,所以一定要将DOM操作的js代码放到Vue.nextTick()的回调函数中。除了在created()钩子函数中使用之外咱们还会遇到很多种需要使用到Vue.nextTick()的场景,如下所示:

咱们日常生活中常常会遇上上述场景,当我们点击按钮更新数据时候,如下示例:

<template>
    <div>
     <input type="text" v-if = "isShow" ref="input"/>
     <button @click="handleClick">点击显示输入框,并且获取输入框焦点</button>
   </div>
</template>
<script>
export default {
 data() {
     return {
         isShow: false 
      }
 },
 methods : {
 handleClick () {
     this.isShow = true
     this.$refs.input.focus() //控制栏会报错,因为还没有这个dom    
    }
  }
}
</script>

点击控制栏显示效果:控制栏报错,提示没有获取到dom元素;

所以现在Vue.nextTick()派上了用场,Vue.nextTick() 方法的作用正是等待上一次事件循环执行完毕,并在下一次事件循环开始时再执行回调函数。这样可以保证回调函数中的 DOM 操作已经被 Vue.js 进行过更新,从而避免了一些潜在的问题,如下代码所示:

<template>
  <div>
    <input type="text" v-if = "isShow" ref="input"/>
    <button @click="handleClick">点击显示输入框,并且获取输入框焦点</button>
  </div>
</template>
<script>
export default {
 data() {
   return {
     isShow: false
   }
 },
 methods : {
   handleClick () {
     this.isShow = true
     this.$nextTick(()=>{
       this.$refs.input.focus() 
     })
 
   }
 }
}
</script>

加上this.$nextTick后就能够使得输入框获取到焦点;

总而言之Vue.nextTick()就是下次 DOM 更新渲染后执行延迟回调函数。在日常开发中,我们在修改数据之后使用这个方法,就可以获取更新后的 DOM的同时进行在对DOM进行相对应操作的 js代码;

2.$nextTick如何实现的?

JS是单线程执行的,所有的同步任务都是在主线程上执行的,形成了一个执行栈,从上到下依次执行,异步代码会放在任务队列里面。

同步任务

在主线程里执行,当浏览器第一遍过滤html文件的时候可以执行完;(在当前作用域直接执行的所有内容,包括执行的方法、new出来的对象)

异步任务

耗费时间较长或者性能较差的,浏览器执行到这些的时候会将其丢到异步任务队列中,不会立即执行

同时异步任务分为宏任务(如setTimeout、setInterval、postMessage、setImmediate等)和微任务(Promise、process.nextTick等),浏览器执行这两种任务的优先级不同;会优先执行微任务队列的代码,微任务队列清空之后再执行宏任务的队列,这样循环往复;

JS自上向下进行代码的编译执行,遇到同步代码压入JS执行栈执行后出栈,遇到异步代码放入任务队列,当JS执行栈清空,去执行异步队列中的回调函数,先去执行微任务队列,当微任务队列清空后,去检测执行宏任务队列中的回调函数,直至所有栈和队列清空

整体流程如下图所示:

接下来让我们看看nextTick的源码~

vue将nextTick的源码放在了vue/core/util/next-tick.js中。如下图所示:

我们把这个文件拆成三个部分来看:

1.nextTick定义函数

我们将nextTick函数单独拿出来,callbacks是一个回调队列,其实调用nextTick就是往这个数组里面传执行任务,callbacks新增回调函数之后执行timerFunc函数,pending是用来限制同一个事件循环内只能执行一次的pending锁;

const callbacks = [] // 回调队列
let pending = false // 
export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 callbacks.push(() => {
  // cb 回调函数会经统一处理压入 callbacks 数组
     if (cb) {
         try {
             cb.call(ctx)
         } catch (e) {
             handleError(e, ctx, 'nextTick')
         }
     } else if (_resolve) {
         _resolve(ctx)
        }
     })
  // 执行异步延迟函数 timerFunc
     if (!pending) {
     pending = true
     timerFunc()
 }
 // $flow-disable-line
 // 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用
if (!cb && typeof Promise !== 'undefined') {
     return new Promise(resolve => {
     _resolve = resolve
     })
 }
}

2.timerFunc函数 做了四个判断,先后尝试当前环境是否能够使用原生的Promise.then、MutationObserver和setImmediate,不断的降级处理,如果以上三个都不支持,则最后就会直接使用setTimeOut,主要操作就是将flushCallbacks中的函数放入微任务或者宏任务,等待下一个事件循环开始执行;宏任务耗费的时间是大于微任务的,所以在浏览器支持的情况下,优先使用微任务。如果浏览器不支持微任务,使用宏任务;但是,各种宏任务之间也有效率的不同,需要根据浏览器的支持情况,使用不同的宏任务;

export let isUsingMicroTask = false
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
 //是否支持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]'
)) {
//是否支持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)) {
 timerFunc = () => {
  //是否支持setImmediate
 setImmediate(flushCallbacks)
 }
} else {
 // Fallback to setTimeout.
 timerFunc = () => {
  //上面都不行,直接使用setTimeout
 setTimeout(flushCallbacks, 0)
 }
}

3.flushCallbacks函数

flushCallbacks函数只有几行,也很好理解,将pending锁置为false,同时将callbacks数组复制一份之后再将callbacks置为空,接下来将复制出来的callbacks数组的每个函数依次进行执行,简单来说它的主要作用就是用来执行callbacks中的回调函数;

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

值得注意的是,$nextTick 并不是一个真正意义上的微任务microtask,而是利用了事件循环机制来实现异步更新。因此,它的执行时机相对于微任务可能会有所延迟,但仍能保证在 DOM 更新后尽快执行回调函数。

总的来说,nextTick就是

1.将传入的回调函数放入callbacks数组等待执行,定义pending判断锁保证一个事件循环中只能调用一次timerFunc函数;

2.根据环境判断使用异步方式,调用timerFunc函数调用flushCallbacks函数依次执行callbacks中的回调函数;

3.个人小结

nextTick可避免数据更新后导致DOM的数据不一致的问题,提供了更稳定的异步更新机制,解决了created钩子函数DOM未渲染会造成的异步数据渲染问题,但如果过多的使用nextTick会导致事件循环中任务数量和回调函数增多,有可能出现可怕的回调地狱,导致性能下降,同时过度依赖nextTick也会降低代码的可读性,所以大家还是"按需加载"的好~

作者:京东保险 卓雅倩

来源:京东云开发者社区 转载请注明来源文章来源地址https://www.toymoban.com/news/detail-760466.html

到了这里,关于解析$nextTick魔力,为啥大家都爱它?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AIGC|AGI究竟是什么?为什么大家都在争先入场?

    2022年12月ChatGPT突然爆火,原因是其表现出来的智能化已经远远突破了我们的常规认知。虽然其呈现在使用者面前仅仅只是一个简单的对话问答形式,但是它的内容化水平非常强大,甚至在某些方面已经超过人类了,这是人工智能板块的重大突破。 近半年来,整个行业都在致

    2024年02月06日
    浏览(57)
  • Hadoop学习:深入解析MapReduce的大数据魔力之数据压缩(四)

    压缩的优点:以减少磁盘IO、减少磁盘存储空间。 压缩的缺点:增加CPU开销。 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 1)压缩算法对比介绍 2)压缩性能的比较 压缩方式选择时重点考虑:压缩/解压缩速度、压缩率(压缩后存储大小)、压缩后是否 可以

    2024年02月12日
    浏览(44)
  • 【计算机网络】TCP中payload的解析,在python中的体现?字节、字符?为啥字节用十六进制表示?

    问题来源 最近要根据一份国家标准协议进行解码,但是对于进制,字节,字符,编码,转码有比较多的问题。其中我想实现的主要需求如下: 有客户端与服务端,进行tcp通信,客户端要发送一个请求,tcp中payload请求大概是这样,有很多个十六进制表示的字节组成 根据协议的

    2024年02月11日
    浏览(61)
  • Redis为什么快?蕞全面试回答,带解析

    面试原题:Redis为什么这么快?(网易一面 · 2023) 题目来自牛客网 参考答案 后面有 详细答案解析,帮助更快记忆~ 参考答案共496字符,阅读约需1分2秒;全文共4867字符,阅读约需6分钟 这个问题实际上考察的是对于Redis的架构了解多少,我们可以从多个角度来进行回答。

    2024年02月12日
    浏览(51)
  • TCP为什么需要进行三次握手深入解析

    首先简单介绍一下TCP三次握手 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认; 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己

    2024年02月05日
    浏览(47)
  • STM32中MicroLIB的关闭为什么会导致卡死----解析

    大家好我是 MHZ 。最近又开始往回捡单片机的知识了~ 之前大学的时候都没用过 STM 的 CubeMX,这会拿来用着感觉很方便啊~ 果然科技在进步! 在开发使用 Keil 对 STM32 进行开发的时候在会有一个叫做 MicroLIB 的选项。 这个的具体原因我搜索了一下一些文章,就是说这个会是的 K

    2024年03月22日
    浏览(78)
  • 小米盒子为什么搜不到电视家?电视安装包解析错误解决方案

    不少的朋友在小米电视盒子上安装了美家市场软件商店后,却发现在市场里面没法安装想要的电视盒子直播软件,这是怎么回事呢?其实大部分原因是电视盒子机制的问题限制了安装,导致部分品牌电视盒子装软件时会弹出“无法安装”的提示。 本身厂商的原因不好解决,但

    2024年02月09日
    浏览(60)
  • 为什么连上无线路由器后,电脑网速变慢了的原因解析

    最近回答了好几个网友在百度知道里关于路由器的设置方面的问题,特别是关于原来没有通过路由器上网的用户,在用上了路由器后发现网速变慢呢?为什么呢?最有可能的原因是路由器的带宽有个默认值,好像是512KKB/S也就是4M,现在大城市的小区都拉光纤了,10M,20M都有,

    2024年02月06日
    浏览(51)
  • 模块化与单片化优缺点解析:为什么单片链仍是 DeFi 协议的最好选择?

    目前模块化区块链热度不减,其诞生的原因源自于单片链的局限和缺陷。  什么是」模块化「? 在软件工程开发中,」模块化「是指将代码进行解耦, 使每个模块的功能独立, 模块之间的耦合程度低, 达到模块复用的目的。  模块化的本质是一种任务分工,不同的模块组合成的程

    2023年04月09日
    浏览(40)
  • C++这么难,为什么我们还要用C++?C++ Core Guidelines解析给了我答案

    C++ 是一门强大而复杂的编程语言,它有其独特的应用场景和优势,尽管它可能在学习和使用上有一些挑战,但仍然被广泛采用的原因有很多,尽管 C++ 有其优势,但它也确实有一些复杂性和潜在的陷阱,因此在选择使用它时需要权衡。对于一些应用场景,其他编程语言,如Py

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包