面试题浅析$nextTick的底层原理

最新推荐文章于 2023-01-02 00:08:02 发布
最新推荐文章于 2023-01-02 00:08:02 发布
阅读量1k 收藏 1
点赞数
文章标签： 面试 vue.js 职场和发展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr__proto__/article/details/121059561
版权

近期面试常问的问题 n e x t T i c k 的 底 层 原 理 是 什 么 使 用 场 景 : S w i p e r 轮 播 图 实 例 化 的 时 候 , 拿 不 到 D O M , 因 此 不 能 使 用 , 轮 播 失 效 , 此 时 用 w a t c h + nextTick的底层原理是什么 使用场景:Swiper轮播图实例化的时候,拿不到DOM,因此不能使用,轮播失效,此时用watch+ nextTick的底层原理是什么使用场景:Swiper轮播图实例化的时候,拿不到DOM,因此不能使用,轮播失效,此时用watch+nextTick解决

注意有两个nextTick
一个是vue内部的nextTick函数
一个是我们调用的nextTick/$nextTick函数
面试官问nextTick的原理, 并不仅仅是问我们调用的nextTick

搞懂$nextTick的底层原理,首先要知道以下两个前提:

1.DOM的更新和渲染是两回事

在这里插入图片描述

2.DOM的更新也是异步的,如何证明呢?

当我们更新data里的一个数据的时候,如果赋值两遍第二遍会覆盖第一遍,正因如此,DOM更新是异步的,并且内部也是用nextTick实现的

正式解释nextTIck开始

DOM更新异步执行,此时其内部的nextTick要进入微队列,是先进入的,我们写的 n e x t T i c k 也 是 要 进 入 微 队 列 , 但 是 晚 于 D O M 更 新 的 n e x t T i c k , 所 以 我 们 写 的 nextTick也是要进入微队列,但是晚于DOM更新的nextTick,所以我们写的 nextTick也是要进入微队列,但是晚于DOM更新的nextTick,所以我们写的nextTIck内部写的回调就可以第一时间获取到DOM更新的数据了
事件队列里的执行如下图:
在这里插入图片描述

总结来说就是:
一:DOM更新内部也是使用nextTick,是异步的先进入事件队列,注意此时没有渲染DOM
二:$nextTick后进入事件队列,等第一步的nextTick执行完再执行,然后再进行DOM渲染

注意$nextTick的内部会有限考虑用Promise微任务,如果浏览器不支持,会使用setImmediate,setTImeout等宏任务

Mr__proto__
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发：$nextTick()的使用及原理
软贱开发攻城狮
05-31 1万+
在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。那么本篇博文就来分享一下关于$nextTick()的使用及原理，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，总结记录一下，方便后期查阅使用。
面试题：Vue中$nextTick原理
热门推荐
frontend_frank的博客
05-05 1万+
　在做项目的时候，我们经常会用到nextTick，简单的理解就是它就是一个setTimeout函数，将函数放到异步后去处理；将它替换成setTimeout好像也能跑起来，但它仅仅这么简单...
见微知著 - 1000字带你掌握nextTick背后的原理
大转转FE
05-21 229
一、引言在开发过程中，我们经常遇到这样的问题：我明明已经更新了数据，为什么当我获取某个节点的数据时，却还是更新前的数据？在视图更新之后，怎么基于新的视图进行操作？举一个简单的场景：<...
面试题：什么是this.$nextTick
q879936814的博客
08-16 599
用于需要直接操作DOM的时候使用，因为Vue虽然有响应式的特性，但是DOM更新和数据是异步的，当然我们以一个用户的角度来看，并没有什么区别，但是我们来看一下下面几个案例就能体会到异步的细节了。----------------------------------------------后续说响应式，留个坑-----------------------------------------------------// 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值；...
【Vue原理】NextTick - 白话版
chongzhun5695的博客
07-15 250
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】NextTic...
Vue核心技术-28,异步更新队列-$nextTick
BraveWangDev
08-21 2323
一,前言 这一篇介绍有关异步更新队列的知识,通过异步更新队列的学习和研究能够更好的理解Vue的更新机制 二,什么是异步更新队列 先看一个例子: &lt;div id="app"&gt; &lt;div id="div" v-if="show"&gt;测试文本(默认隐藏)&lt;/div&gt; &lt;Button @click="toggle&
vue中$nextTick的用法讲解
10-17
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
详解vue中$nextTick和$forceUpdate的用法
12-13
1、$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动...
Vue中this.$nextTick的作用及用法
11-21
这一机制的实现涉及到多个关键概念，包括`this.$nextTick`，它在Vue的异步更新队列中扮演着重要角色。 首先，Vue在初始化组件时，会对`data`对象中的所有属性通过`Object.defineProperty`进行拦截，将其转换为...
Vue异步更新机制以及$nextTick原理.doc
07-09
Vue 异步更新机制以及 $nextTick 原理 Vue 异步更新机制是 Vue 框架中的一种机制，用于异步更新 DOM 元素。这个机制的核心是使用队列来缓冲数据变化，避免不必要的计算和 DOM 操作。在下一个事件循环中，Vue 刷新...
【Vue面试题】说说nextTick的使用和原理？
qq_40992225的博客
08-22 1万+
在修改数据之后立即使用这个方法，获取更新后的DOM。这简单来说就是谁先挂载Promise对象的问题，在调用 $nextTick方法时就会将其闭包内部维护的执行队列挂载到Promise对象，在数据更新时Vue内部首先就会执行 $nextTick方法，之后便将执行队列挂载到了Promise对象上，其实在明白Js的Event Loop模型后，将数据更新也看做一个 $nextTick方法的调用，并且明白 $nextTick方法会一次性执行所有推入的回调，就可以明白执行顺序的问题了。（看不懂这句人话的，可以看上面）
前端面试题 | vue中$nextTick和使用场景和原理是什么？
weixin_48491416的博客
03-14 1825
用途： 在视图更新之后，基于新的视图进行操作 使用nextTick中的回调函数，在下一次更新DOM更新循环结束之后执行回调 为什么使用$nextTick? DOM更新是异步操作，在数据更新完成之后，DOM不会立即更新，而是等同一事件循环中的所有数据变化完成之后，在统一进行视图更新。所以使用$nextTick可以使同步任务在DOM更新完成之后去执行。 例如： 获取设置输入框由隐藏变为显示，再去获取这个DOM元素就需要使用$nextTick 在 created 和 mounted 阶段，如果需要操
探索Vue.js底层源码——nextTick实现及原理
五柳
12-09 1236
nextTick Vue 中 nextTick 的实现主要是基于微任务队列，它是通过原生的 Promise.then 或 MutationObserver 实现，需要注意的是 nextTick 更多地会选择 Promise.then 进行触发，因为在 IOS（>= 9.3.3）的时候，MutationObserver 在触发几次后会失效。 我想大家对 Promise.then 都有认知，最常...
1000字带你掌握nextTick背后的原理
m0_70273331的博客
05-04 4345
答：如果我们需要获取数据更新后的dom信息，比如动态获取dom的宽高、位置等，就需要使用nextTick。 handleClick () { this.msg = ‘hello world’; this.$nextTick(() => { console.log(this.$refs.message.innerText) // hello world }) } 如vue官网的描述： Vue 在更新
Vue.js 简单描述nextTick原理?
qq_39280289的博客
09-28 201
①调用nextTick函数传入回调函数 ②JS中调用栈（call stack）的执行规则是先执行同步代码，空闲时进行事件循环（event loop）执行任务队列（task queue）里的函数。像操作DOM的代码就是同步代码，会先于nextTick函数传入的回调函数执行。 ③实际上问题就是怎么写异步函数的问题，Vue中采用了4种执行异步函数的代码判断， Promise类 => MutationObserver类 => SetImmediate函数 => SetTimeout函数 P
浅析vue.nextTick原理
shuoxi666的博客
08-21 581
目录什么是vue.nextTick() 这篇文章的基础是js的event loop(事件循环)，还不熟悉事件循环机制的可以看下这篇博客 event loop 什么是vue.nextTick() vue.nextTick()是
从 JS Event Loop 机制看 Vue 中 nextTick 的实现原理
技术杂谈
11-24 2772
本文来自作者 大师兄 在 GitChat 上分享「从 JS Event Loop 机制看 Vue 中 nextTick 的实现原理」，「阅读原文」查看交流实录 「文末高能」 编辑 | 泰龙 作为一名前端，一直以来以精通 Javascript 为目标。其实说实话精通真的挺难，不是你记住全部的 API 就算是精通。 JavaScript 的知识非常零散而庞杂，很多情况下上周
$nextTick()的理解
xianengneng的博客
12-04 2467
vue的$nextTick() 先看码 &lt;div class="app"&gt; &lt;div ref="msgDiv"&gt;{{msg}}&lt;/div&gt; &lt;div v-if="msg1"&gt;Message got outside $nextTick: {{msg1}}&lt;/div&gt; &lt;div v-if=
Vue 的 nextTick 的原理是什么?
qwerrerfjj的博客
01-02 266
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api。时而将nextTick封装成宏任务，时而将nextTick封装成微任务。不过目前vue2最新的版本，nextTick底层是微任务。常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）1、为什么需要 nextTick。
面试题$nextTick怎么讲
最新发布
11-16
其原理是利用JavaScript的事件循环机制，在DOM更新后将回调函数放入事件队列中，等待下一次事件循环时执行。具体来说，$nextTick会先将回调函数放入一个异步队列中，然后利用浏览器提供的requestAnimationFrame方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值