当前位置:首页 > 技术文章 > 正文内容

71、Vue 的 nextTick 的原理是什么?(高薪常问)

zonemu2个月前 (08-28)技术文章19

1、为什么需要 nextTick

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api了。

2、理解原理前的准备

首先需要知道事件循环中宏任务和微任务这两个概念

(2,1)常见的宏任务有:script, setTimeout, setInterval, setImmediate, I/O, UI rendering

(2,2)常见的微任务有:process.nextTick(nodejs),Promise.then(), MutationObserver

3、理解 nextTick 的原理

正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。

相关文章

Vue状态管理:Pinia完整指南(状态管理vuex)

概述本文专注于Vue的状态管理。我们将深入探讨如何使用Pinia来管理Vue应用程序的状态。状态管理使用props和emit进行父子组件间的数据协作虽然方便,但在以下情况下可能不够充分,数据传递往往会...

使用Java统计gitlab代码行数(统计github代码行数的方法)

使用Java统计gitlab代码行数一、背景:需要对当前公司所有的项目进行代码行数的统计二、 可实现方式1.脚本:通过git脚本将所有的项目拉下来并然后通过进行代码行数的统计样例:echo 创建项目对...

15款测试html5响应式的在线工具(测试类h5)

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面...

Web前端全套教程+视频包含JavaScript、Vue等

写在前面:web前端从入门到精通经典教程,老师精心讲,想从事编程或者数据分析行业的小伙伴点进来,只需你评论并关注私信留言“前端”。便可免费获取。WEB前端简介:WEB前端工程师,也叫Web前端开发工程...

HTML5培训的学习大纲

第一阶段前端开发基础:1.HTML标签语言(xhtml+html5)行业介绍,本地环境配置,sublime编辑器学习使用,制作html标准模板,css基础,html常用标签(一),html常用标签(二...

web前端是什么,在哪些地方有应用,html和html5区别都在这里了

web前端是什么,在哪些地方有应用简介web前端开发技术什么是html、html5什么是css、css3什么是js,javascriptweb前端的应用大家好,我是ots_luo,很多小伙伴不知道we...