首页 > 其他分享 >Vue的nextTick的原理

Vue的nextTick的原理

时间:2022-09-25 08:44:23浏览次数:52  
标签:nextTick Vue 队列 任务 原理 执行

知识储备:事件循环有宏任务和微任务,宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的js代码,剩余队列任务有setTimeout setInterval
微任务所处的队列就是微任务队列,只能有一个队列,有process.nextTick() promise.then()
执行顺序:先执行第一个宏任务队列,在执行微任务队列,最后执行宏任务后面的队列
原理是Vue通过异步队列控制DOM更新和nextTick回调函数先后执行顺序的方式
作用就是感知dom更新完成,类似updated

标签:nextTick,Vue,队列,任务,原理,执行
From: https://www.cnblogs.com/zhulongxu/p/16727219.html

相关文章

  • vue3和react虚拟DOM的diff算法区别
    vue3随着Vue3.0版本的发布,我们在使用或者对其源码进行阅读时会惊讶的发现,它又又又双叒叕变强了,尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升,它的更新机制会......
  • 编译原理:代码生成
    这编译的最后一步,也就是生成目标代码,则必须跟特定CPU架构相关。这就是编译器的后端。不过,后端不只是简单地生成目标代码,它还要完成与机器相关的一些优化工作,确保生成的目......
  • vue3 基础-Mixin
    本篇开始来学习一波vue中的一些复用性代码的基础操作,首先来介绍关于代码"混入"mixin的写法.直观理解这个mixin就是一个js对象去"混入"vue的组件呀,插件呀......
  • 尚品汇后台管理项目:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes
     问题描述:切换路由时控制台不断弹出警告  vue-router.esm.js?8c4f:16[vue-router]Duplicatenamedroutesdefinition    解决方案参考:vue动态添加路由,跳转页......
  • Vue项目的部署(服务器)
    前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了,访问链接点这里。服务器是朋友的,倒时候打不开会很正常,说不定又使用服务器玩大数据项目去了......
  • vue3新语法糖——setup script
    前言vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了。那么在使用vue3compositionAPI的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法,然后发现模......
  • Vue 页面渲染完成后获取元素并修改其CSS样式
    1.将所要获取的元素加入ref属性<divslot="header"class="clearfix"ref="clearFix"></div>2.获取元素对象,并修改样式methods:{changeStyle:function(){let......
  • 跟我学Python图像处理丨带你掌握傅里叶变换原理及实现
    摘要:傅里叶变换主要是将时间域上的信号转变为频率域上的信号,用来进行图像除噪、图像增强等处理。本文分享自华为云社区《[Python图像处理]二十二.Python图像傅里叶变换原......
  • vue的生命周期
     1.创建前beforeCreateddata和methods还没有进行初始化 2.创建后createddata和methods已经初始化完成 3.渲染前beforeMount 已经编译好了模板字符串,但是......
  • 编译原理:代码优化
    常见的代码优化方法对代码做优化的方法有很多,可按照下面两个维度进行分类:第一个分类维度,是机器无关的优化与机器相关的优化。机器无关的优化与硬件特征无关,比如把常数......