终于搞懂了this.$nextTick()的使用场景

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量322 收藏 2
点赞数
分类专栏： vue 异步 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41593185/article/details/130072181
版权

this.$nextTick：获取更新之后的DOM

具体来说时获取异步更新之后的DOM，因为如果修改了DOM的显示或者隐藏后立刻要获取DOM元素是获取不到的，因为获取的代码时同步的，DOM的更新时异步的，同步代码执行完后才能执行异步代码，所以同步的获取代码执行的时候DOM还没有更新，异步代码执行完后才算一个渲染循环，最新的DOM元素在下一次渲染循环时才可以获取

而this.$nextTick就是获取下一次渲染循环时的DOM

解决场景：开始为了性能考虑使用v-if设置变量isShow默认为false隐藏一个div元素，然后等待数据获取到再把数据绑定到div中 就是设置isShow为true,注意此时DOM需要从无到有创建，这叫做DOM更新，更新是异步的所以即使获取到数据后改变变量为true也是同步的操作，div盒子不会在本次渲染循环中显示

使用this.$nextTick在回调函数中拿到最新的DOM，也就是下一次更新的DOM（不要过分解读）

注意一点：这个函数是异步的需要等到所有同步代码执行完毕后才会执行里面的回调

实际测试如下：

没有this.$nextTick：

 加了this.$nextTick：

 最后补充DOM更新原理是在微任务完成后更新DOM然后宏任务，具体同步异步可以看一下珠峰的相关视频讲的很细

KeepThinkig
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中Promise.then，this.$nextTick 和 setTimeout 的执行优先级，以及nextTick 的内部实现原理
为了WLB努力
07-13 1066
和都属于微任务，优先级较高。setTimeout属于宏任务，优先级较低。在同一个事件循环中，所有微任务执行完毕后才会执行宏任务。理解这些机制的差异可以帮助你更好地控制异步操作的执行顺序，确保在合适的时间点进行 DOM 操作或其他依赖更新的数据处理。：更适合在 Vue 的数据更新和 DOM 渲染之后执行回调。它保证了回调在 DOM 更新完成之后执行，因此非常适合需要操作更新后 DOM 的情况。setTimeout：更通用的异步执行方法。它不会等待 DOM 更新完成，只会在当前事件循环结束后执行回调。
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
1. **关于`this.$refs`的使用场景** - **普通元素**：当`ref`属性添加到HTML的普通元素上时，`this.$refs.refName`将引用对应的DOM元素。例如，以下代码中`this.$refs.p`将指向包含文本"hello"的`<p>`元素： ```...
Vue中的this.$nextTick的使用场景
LZHnlxx的博客
08-15 319
为什么会出现获取不到最新的DOM的情况？ Vue 的响应式系统采用了异步更新队列的机制，当我们修改data中的数据后， Vue 并不会立即更新真实DOM，而是把这个更新操作放入一个队列，其他数据的变化操作也放入这个队列，视图需要等到队列中所有数据变化完成之后，统一进行批量更新。
【vuejs】$nextTick的原理分析和使用场景
工作的日常记录和平凡的生活分享
06-07 1414
优先级高：微任务在当前执行栈清空后立即执行，优先于宏任务。快速响应：微任务的执行不会等待浏览器的下一个渲染周期，可以更快地响应数据变化。适用于频繁操作：由于执行速度快，微任务适合处理需要快速反馈的频繁操作。优先级低：宏任务在当前执行栈清空并且所有微任务执行完毕后执行。可能影响渲染：宏任务的执行可能需要等待浏览器的下一个渲染周期，因此可能会影响页面的渲染性能。适用于低频操作：宏任务适合处理不需要立即反馈的低频操作。
this.$nextTick()的使用场景
马优晨
04-26 3万+
一、用途 应用场景：需要在视图更新之后，基于新的视图进行操作。 this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异...
VUE this.$nextTick()的使用场景
走在搬砖的路上！
07-19 4971
【TAG - 1】： 官网解释： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 个人理解： 用于直接操作dom元素的时候使用，由于直接操作dom元素时页面拿到的状态是修改之前的数据，这时需要使用到this.$nextTick，相当于setTimeout。 代码展示： <template> <button ref="bo..
Vue.js 中this.$nextTick()用法
qq_57223591的博客
07-21 2161
简单地说nextTick()可以在当前代码块的同步代码执行完毕后，立即执行传入的回调函数。通常情况下，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新，这意味着如果你想在 DOM 更新后立即执行一些操作，可能会遇到问题。这时就可以使用nextTick()方法来确保回调函数在 DOM 更新后立即执行。需要注意的是，nextTick()方法是异步的，所以回调函数的执行顺序是不确定的。
vue:this.$nextTick使用场景
护着我的发际线的博客
11-05 322
使用的原理： vue的响应式，即不是数据发生变化后立即更新DOM，而是更新DOM 属于异步执行操作。 需等待所有的同步任务执行完成之后，才会进行异步任务执行。 使用场景： 1，想在created中进行DOM操作。原因：在created中不会对DOM进行任何的操作，如果你想在拿到数据后直接更新DOM,可以使用this.$nextTick(); created() { this.$nextTick(() => this.data1='222'; ); },
5.7 Vue中this.$nextTick()方法的使用及代码示例
热门推荐
蚊者逆袭的博客
05-25 3万+
nextTick() 是 Vue.js 框架中的一个方法，它主要用于 DOM 操作。当我们修改 Vue 组件中的数据时，Vue.js 会在下次事件循环前自动更新视图，并异步执行 $nextTick() 中的回调函数。这个过程可以确保 DOM 已经被更新，以及可以操作到最新的 DOM。具体来说，当修改了 Vue 组件中的数据时，Vue.js 并不会立即进行视图更新。Vue.js 会将修改的数据记录下来，并在下一次事件循环时才更新视图。
vue created mounted this.$nextTick的使用场景
qq_41238459的博客
04-20 4612
created //组件创建之后 created() { // 可以操作数据，发送ajax请求，并且可以实现 // vue对页面的影响 应用：发送ajax请求 console.log('组件创建后：'+this.msg); //哈哈哈 } mounted //装载数据到DOM之后 mounted() { // 可以操作DOM ...
this.$nextTick()的原理与使用场景
ych6666的博客
01-10 1万+
this.$nextTick()的原理与使用场景 遇到这个方法的时候，比较困惑，搜集一些资料，总结一下其原理和用途 官网说法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 获取更新后的DOM，言外之意就是什么操作需要用到了更新后的DOM， 而不能使用之前的DOM， 所以就衍生出了这个获取更新后的 DOM的Vue方法 DOM是如何更新的呢？ 1.原理 Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。 异步执行的运行机
详解vue中$nextTick和$forceUpdate的用法
12-13
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 应用场景： 1、 在Vue...
详解vue指令与$nextTick 操作DOM的不同之处
10-18
两者在处理DOM操作时各有优势，理解它们的区别和使用场景，能帮助我们编写出更高效、更可靠的Vue应用。在实践中，应尽量遵循数据驱动的原则，避免直接操作DOM，但当确实需要时，`$nextTick`和恰当的指令钩子能成为...
解决vue bus.$emit触发第一次$on监听不到问题
11-20
在事件总线（bus）的场景下，`$emit`和`$on`的使用稍有不同。在`bus.js`中，我们创建了一个新的Vue实例，并将其导出供其他组件引用。当需要在组件间通信时，我们会在组件中引入这个bus实例，通过`$on`注册监听器，...
vue中$nextTick的用法讲解
12-07
在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 625
注释很详细，直接上代码……
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 263
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 961
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 333
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值