首页 > 其他分享 >对$nextTick的理解,及其实现原理

对$nextTick的理解,及其实现原理

时间:2023-05-21 16:00:14浏览次数:42  
标签:nextTick 函数 DOM callbacks 任务 理解 msg 原理

1.对$nextTick的理解:

VUE中数据变化后,是异步更新DOM的,如果想数据变化后,操作dom,这个时候获取到的是没有变化的值

    eg:

<div class="msg">
        {{msg}}
    </div>


 mounted(){
        this.msg = '我是测试文字'
        console.log(document.querySelector('.msg').offsetHeight) //0
 }

  

  为了在数据更新操作之后操作DOM,我们可以在数据变化之后立即使用Vue.nextTick(callback);这样回调函数会在DOM更新完成后被调用,就可以拿到最新的DOM元素了。

  eg:

this.msg = '我是测试文字'
this.$nextTick(()=>{
    console.log(document.querySelector('.msg').offsetHeight) // 20
})
  $nextTick() 会返回一个 Promise 对象,可以是用async/await完成相同作用的事情

2.$nextTick的实现原理:

    外层定义了三个变量:callbacks 放任务队列;pending 用来标识同一个时间只能执行一次;timerFunc函数:把callBack里的值放入微任务或者宏任务中去执行【这里的细节是:把callbacks数组复制一份放到flushCallbacks里,然后把callbacks置为空,最后把把复制出来的数组flushCallbacks中的每个函数依次执行一遍】

  所以 整体nextTick的流程就是:

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中
  3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调

  参考链接:https://juejin.cn/post/6844904147804749832

标签:nextTick,函数,DOM,callbacks,任务,理解,msg,原理
From: https://www.cnblogs.com/it-girl-maxiaotiao/p/17418699.html

相关文章

  • Android 热补丁之 Tinker 原理解析
    阅读本文大概需要1分钟。哈,一晃好几天没更文了,然后后台又一大堆读者给我留言,说没有我的文章,感觉生活都没有动力了,对于这样的读者,我只能说:你肯定单身吧?主要是上周五开始就出去旅游了,跟着老板一起出去嗨了一把。所以一直没更新,但是,我是不会忘记你们的,这不,刚回归就给大家带来一篇干......
  • 聊聊Mybatis的实现原理
    使用示例平时我们使用的一般是集成了Spring或是SpringBoot的Mybatis,封装了一层,看源码不直接;如下,看看原生的Mybatis使用示例示例解析通过代码可以清晰地看出,MyBatis的操作主要分为两大阶段:第一阶段:MyBatis初始化阶段。该阶段用来完成MyBatis运行环境的准备工作,读取配置并初......
  • 深入理解 python 虚拟机:魔术方法之数学计算
    深入理解python虚拟机:魔术方法之数学计算在本篇文章当中主要给大家介绍在python当中一些常见的魔术方法,本篇文章主要是关于与数学计算相关的一些魔术方法,在很多科学计算的包当中都使用到了这些魔术方法。大小比较当我们在Python中定义自己的类时,可以通过重写一些特殊方法来......
  • 跨域JSONP原理及调用具体示例
    上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS。 那这篇博客就介绍JSONP方式。  JSONP原理  在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这......
  • Geolocation背后的基本原理
    LBS在移动设备和浏览器里已应用地非常广泛,基于API能很轻松地实现一些和地址位置有关的应用,但一直对这些API背后是如何获取使用者的位置信息却不得而知,今天花了时间粗浅地研究了一下: 得到位置信息主要通过两种途径:GPS和WIFI1.GPSGPS基本原理是测量出已知位置的卫星到用户接收机之......
  • 怎么理解回调函数? 回调函数合集
    网上查了一通,有点体会,特来分享与讨论。 ****************************************************************************************************************************SECTION1*****************************************************************************************......
  • ROSBridge简介以及理解使用
    安卓与ROS通信的现状因为ROS官方支持的语言绑定只有C++和Python,所以目前安卓想与ROS通信,必须借助半官方的rosjava包,而Rosjava太重了,因为它跟C++/Python一样,是一个全功能的ROS绑定,意即你可以在Java(android)平台上创建MasterNode,然后其他Node(C++/Python)可以连上这个Master,进行分布式......
  • proto中service 作用的理解
    转载请注明出处:在proto文件中,service用于定义一组RPC方法,在服务端实现这些方法,并在客户端调用这些方法进行远程过程调用。service的定义方式如下:serviceMyService{rpcMyMethod(MyRequest)returns(MyResponse);}其中,MyService是服务的名称,MyMeth......
  • synchronized原理
    `synchronized`是Java中用来实现线程同步的关键字,它的主要作用是对代码块或方法进行加锁,保证在同一时刻只有一个线程能够执行被加锁的代码块或方法,从而避免多个线程同时访问共享资源导致的数据不一致问题。`synchronized`的实现原理是基于Java对象头中的monitor(监视器)实......
  • 深入理解多核处理器的缓存一致性和通信机制
    操作系统级别的上下文切换操作系统级别的上下文切换是指当一个线程在执行过程中发生某种事件(如时间片用完、发生中断等),操作系统需要暂停当前线程的执行,保存其上下文(如寄存器状态、程序计数器、堆栈指针等),并切换到另一个线程继续执行的过程。这种上下文切换是由操作系统内核......