this.$nextTick与setTimeout

最新推荐文章于 2024-02-23 14:55:27 发布
最新推荐文章于 2024-02-23 14:55:27 发布
阅读量541 收藏 6
点赞数 7
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43770056/article/details/135222654
版权

Vue中封装了方法$nextTick

表示该方法里面的函数将在下一次DOM更新后才执行

this.$nextTick(()=> {  
 
}

平时如果我们将想要执行的方法放在其他代码后面执行 也可以使用setTimeout  

setTimeout(()=> {

},0)

有些时候这两个方法都能完成我们想要的功能 

$nextTick是Vue封装的方法 源码实际上优先用的Promise 然后setInterval 两者都不支持的情况下使用setTimeout

所以本质上是有着宏任务与微任务之间的区别

$nextTick是在DOM更新后更新

setTimeout只是执行延迟 与DOM操作无关 DOM此时有可能更新也有可能不更新

所以如果你的需求需要依赖DOM更新 肯定是使用$nextTick更好

web网页精选
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue.nextTick()与setTimeout的区别
wei_dan1129的博客
04-29 7868
nextTick相当于一个异步函数：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 vue.nextTick()的使用场景 Vue中DOM渲染是在mounted()钩子函数中，created()钩子函数中DOM还未渲染，无法直接操作DOM 1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$...通过`this.$nextTick()`或`setTimeout()`确保在DOM更新后进行操作，可以避免许多与`this.$refs`相关的错误。同时，合理设计组件结构和使用`v-if`、`v-for`指令，可以进一步优化`$refs`的使用。
this.$nextTick 与window.setTimeout
weixin_30613343的博客
07-18 691
两个都可以设置运行先后。前者，方式： this.$nextTick(() => { this.$refs.orgAddOrUpdate.init(row, isAdd) }) 其中orgAddOrUpdate是一个组件的ref，组件里的metheds里边有init方法。 转载于:https://www.cnblogs.com/sweeeper/p/1120...
Vue 中的 $nextTick 和 setTimeout 方法使用
EverythingAtOnce的博客
12-14 1237
nextTick和setTimeout都是在异步环境中执行代码的方式，但各自适用于不同的场景。Vue 的nextTick提供了一种优雅的方式来确保在 DOM 更新后执行操作，而setTimeout则是 JavaScript 中常用的延迟执行方法。
【思考】$nextTick 与 setTimeout 的一点对比！
粉丝们务必加入微信粉丝群
07-14 1631
作者：Chimezie Enyinnaya 译者：前端小智 来源：blog 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 一个前端开发人员(小智)走进了一个Vue酒吧。小智点了他最喜欢的鸡尾酒：Nuxt。酒保正在努力制作中。然后他自己就唠叨了起来。 小智讲述了他是如何在Vue 3的实例方法下发现$nextTick的，并.
$nextTick 跟 setTimeout的使用
AIHBK的博客
09-13 747
经过筛查，问题所在就是dom更新后，代码执行了但是没有渲染，以下两个方法，都可以解决以上问题！在使用后端返回的数据，进行数据列表选中时，数据更新了，但是没有按照代码去选中！当数据改变后，要基于更新后的新dom进行操作时执行。在下一次dom更新结束后执行回调。
Vue中this.$nextTick的作用及用法
11-21
这一机制的实现涉及到多个关键概念，包括`this.$nextTick`，它在Vue的异步更新队列中扮演着重要角色。 首先，Vue在初始化组件时，会对`data`对象中的所有属性通过`Object.defineProperty`进行拦截，将其转换为...
详解vue指令与$nextTick 操作DOM的不同之处
10-18
本篇文章将详细探讨Vue指令与`$nextTick`在操作DOM上的不同之处。 首先，Vue的指令如`v-if`, `v-for`, `v-bind`等，它们在处理数据变化时并不立即更新DOM。当数据模型发生变化时，Vue会将这些变化放入一个队列中，...
vue之nextTick全面解析
12-10
`this.$nextTick`的巧妙之处在于它能根据浏览器的特性选择最合适的延迟策略，保证在DOM更新后执行回调，这对于处理数据变化与视图更新同步的问题非常有用。在开发Vue应用时，理解`this.$nextTick`的工作原理可以帮助...
$nextTick和setTimeout区别（宏任务微任务）
u010565037的博客
07-13 4906
nextTick和setTimeout区别（宏任务微任务）
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
11-30
本文介绍了详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序，分享给大家，具体如下： 先举一个比较典型的例子： setImmediate(function(){ console.log(1); },0); setTimeout(function(){ console.log(2); },0); new Promise(function(resolve){ console.log(3); resolve(); console.log(4); }).then(function(){ consol
this.$nexttick settimeout promise
liusixsixsix的博客
08-17 693
this.$nexttick settimeout promise的区别
setTimeout、高级监听handler、this.$nextTick
weixin_44426574的博客
10-14 229
setTimeout 0 vue高级监听 nextTick()
$nextTick 、setTimeout 原理与区别
weixin_45682449的博客
03-10 724
$nextTick 、setTimeout 原理与区别
$nextTick 与 setTimeout 的一点对比
CSDN_KONGlX的博客
07-07 286
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
$nextTick的作用以及与setTimeout的区别，
最新发布
chengcheng9876的博客
02-23 1262
$nextTick的作用以及与setTimeout的区别，事件循环 Event Loop，宏任务和微任务
【JavaScript】用了这么久的Vue，你还不知道Promise、nextTick、setTimeout的执行顺序？（涉及EventLoop，由浅入深）
weixin_42678675的博客
06-07 4193
1. 结论   执行顺序：同步代码 > nextTick > Promise> setTimeout   结论先行，如果你只需要答案，看到这一步即可   如果你想进一步了解为何会是这样的执行顺序，请你预留出20分钟的时间，我会带着你由浅入深来了解其背后的运行原理，其中涉及到的知识点有：异步、宏任务和微任务、Event Loop事件循环、JavaScript调用栈和任务队列，不了解这些知识点也没关系，我会用生活中最通俗易懂的例子来让你理解；观点会加上自己的理解，如果理解有误还请评论区指出，
关于setTimeout函数中的this指向问题
Harley567
08-05 1549
setTimeout中的this
setInterval和setTimeout中this指向window问题和解决方案
CaseyWei
08-23 488
问题描述 在setInterval和setTimeout中传入函数时，函数中的this会指向window对象，如下例： var num = 0; function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater ...
settimeout和this.$nexttick执行顺序
12-28
根据提供的引用内容，可以得出以下结论： 1. `$nextTick`是对`setTimeout`进行了兼容性处理，将回调函数放入`setTimeout`中执行。 2. `$nextTick`优先放入微任务执行，而`setTimeout`是宏任务。 3. 一般情况下，`$nextTick`总是先于`setTimeout`执行。 根据以上结论，可以得出以下演示代码： ```javascript console.log('Start'); this.$nextTick(() => { console.log('$nextTick callback'); }); setTimeout(() => { console.log('setTimeout callback'); }, 0); console.log('End'); ``` 输出结果应为： ``` Start End $nextTick callback setTimeout callback ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网页精选

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值