vue3手写nextTick

最新推荐文章于 2024-09-25 18:15:20 发布
最新推荐文章于 2024-09-25 18:15:20 发布
阅读量166 收藏 4
点赞数 3
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52520278/article/details/142523621
版权

在vue3的生命周期中，nextTick是极为特殊的一个，它可以提前获取到更新后的dom元素

首先，我们在没有引入nextTick时来获取一下更新后的dom

在下面这段代码中，我将num设为了0，按理说res应该也是0，但其实不是，第16行打印第4行这个dom元素的时候，这个元素其实还没有渲染完，所以获取不到

其次我们先通过引入的方式来展现nextTick的作用

再来看下面的代码，我将打印的语句放在了nextTick的回调函数里面，可以打印

那这个nextTick到底有什么魔力呢？它为什么可以获取到渲染完成的dom元素？

nextTick的实现基于JavaScript的事件循环和微任务队列。当在Vue中调用nextTick时，它接收一个回调函数作为参数，并将这个函数放入一个任务队列中。如果此时没有等待执行的微任务，nextTick会创建一个新的Promise，并将其resolve方法放入微任务队列。这个Promise在下一个事件循环中被解析时，会执行微任务队列中的所有任务，包括nextTick添加的回调函数。这样，nextTick确保了回调函数在下一个DOM更新循环之后运行。

最后，了解到nextTick的运行机制后，我们就可以通过手写的方式来实现nextTick了

可以成功获取到了

真的不想写实验
关注
学习vue源码（13）手写 $nextTick
weixin_43964148的博客
06-10 540
1.概述 nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。 它与全局Vue.nextTick的原理时一样的。 可能有同学对将回调延迟到下次DOM更新周期之后执行不太理解， 其实它的意思就是 在Vue.js中，当状态发生改变时，watcher会得到通知，然后触发虚拟DOM的渲染过程。而watcher触发渲染这个操作并不是同步的，而是异步的。Vue.js中有一个队列（即callbacks），每当需要渲染时，会将watcher推送到这个队列中，在下一次事件循环中再让w.
手写Vue里的nextTick方法
QingHan_wow的博客
12-16 354
使用的typescript const callbacks: Array<Function> = [] let pending = false const flushCallbacks: Function = (): void =>{ pending = false; if(callbacks && callbacks.length!==0){ const eventList: Array<Function> = [...callbac
vue解析深入nextTick
qq_43505774的博客
12-10 591
官网说异步更新队列 第一次见估计是很抽象 我给大家分析一下 第一步是响应式 先说walk方法 也就是对象 如图 get方法会使用 const dep = new Dep();收集依赖 set方法会触发notify去更新队列 更新的过程 是循环 watcher 也就是观察者 的更新方法 然后触发 queueWarcher 去清空dep队列 你可能会思考观察者怎么会有id 其实也就对应 观察者观察了多少属性 然后 有一个waiting 变量 用于 控制 是否 刷新 有一个async控制是否立刻刷新 用于v.
聊聊vue的nextTick方法
广漂程序猿DevinRock
03-14 881
nextTick是面试常考的vue中的一个重要知识点，但是很多小伙伴常常无法真正的理解nextTick的执行机制，并且背后包含的许多vue的重要知识。本文会把nextTick聊的非常细，让大家彻底搞懂它。
学习vue源码（13）手写$nextTick
2401_84438067的博客
05-02 38
DOM现在更新了})})如果先使用注册回调，然后修改数据，则在微任务对垒中先执行使用注册的回调，然后执行更新DOM的回调。所以在回调中得不到最新的DOM，因为此时DOM还没有更新。在事件循环中，必须当微任务队列中的事件都执行完之后，才会从宏任务队列中取出一个事件执行下一轮，所以添加到微任务队列中的任务的执行时机优先于向宏任务队列中添加的任务。new Vue({methods:{先使用setTimeout向宏任务中注册回调DOM现在更新了},0)然后修改数据向微任务中注册回调})
学习vue源码（13）手写 $nextTick(1)，2024前端面经
m0_60635245的博客
04-20 780
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
【系列 3】vue依赖收集原理与nextTick实现
舜岳的博客
10-18 628
一、vue响应式数据依赖收集原理 vue收集依赖的步骤: Watcher监听： 一个组件一个Watcher，每次执行 updateComponent 更新当前组件时创建一个 Watcher(监听者) => Dep.target。 用来监听该组件执行 render 访问了多少个 data 内的响应式数据，触发了多少 get 响应式get订阅： 每个响应式数据触发 defineProperty 前创建一个 Dep(发布者)。 用来当 1 过程触发了一个 get 时就拿到 1 中的 Dep.target
vue中nextTick方法的核心原理
m0_52669454的博客
10-29 381
vue中nextTick方法的核心原理
vue3 手写nextTick
08-24
在Vue3中，你可以手写nextTick函数来执行渲染Dom操作。下面是一个示例代码来手写nextTick函数： ```javascript let callbacks = [] // 存储回调函数 let pending = false // 表示是否正在执行回调函数 // 执行回...
手写Vue弹窗Modal的实现代码
10-16
在本文中，我们将深入探讨如何手写一个Vue Modal组件，并通过实例代码来解析其实现过程。 首先，让我们来看一下一个简单的Vue通知组件的实现。该组件包含类型（type）、消息（msg）两个属性，用于定义弹窗的样式和...
2小时搞定Vue 3：手写mini版Vue + 核心原理解析(1)，2024年最新头条面试前端
m0_60607675的博客
04-21 473
为了避免大家在学习Vue 3实现原理时选择错误的学习路线，花费较高的时间成本，给大家推荐开课吧**《升职加薪快人一步-Vue3原理解析》通过手写一个mini版本的Vue来学习Vue3的核心原理**，精准找到学习关键点，帮助你快速、顺畅的理解原理。懂原理的程序员在求职过程中自然是多了一分优势。它和其它框架（jquery）的区别是什么？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？Vue 的 nextTick 的原理是什么？Vue 中 key 值的作用？**Vue 3原理解析。
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4355
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 306
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 184
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 348
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
最新发布
PlayerYK的专栏
09-25 154
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
语言的复合语句
编程语言技巧经验分享
09-21 490
在函数中可以声明和定义变量，包含多条执行语句，概念上和复合语句类似。事实上，二者在复合语句的概念上几乎没有区别。类定义，用{}包起来，也是复合语句的一种。
计算机毕业设计 基于Python的荣誉证书管理系统 Django+Vue 前后端分离 附源码 讲解 文档
weixin_19164791635
09-22 1787
基于Python的荣誉证书管理系统，旨在提高学校荣誉证书管理效率，实现数字化存储与查询，涵盖管理员、学生、教师三大角色，具备报表统计、个人中心、证书分类等功能，助力教育信息化发展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值