nextTick（）的简单理解

已于 2022-05-07 16:11:49 修改
阅读量1.7k 收藏 7
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-05-07 15:29:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57696123/article/details/124631821
版权

事件循环说明

简单来说，vue在修改数据后，视图不会立即更新，而是等同一事件循环中的所有数据变化完成后，再统一进行视图更新

当网页数据更新了，并且在dom中渲染后，自动执行该函数，当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新的DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中，通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

在使用某个第三方插件时，需要在vue生成的某些dom动态发生变化时，重新应用该插件，也会用到该方法，这个时候就需要在$nextTick的回调函数中执行重新应用插件的方法

注意：nextTick只是dom渲染完成进行操作，但是有时还是没有加载完成的图片，例如：在获取组件的坐标就会出现错误

nextTick和$nextTick区别

1.nextTick(callback)：当数据发生变化，更新后执行回调。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

2.$nextTick(callback)：当dom发生变化，更新后执行的回调。将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

3.这两个方法没有太大的不同。区别在于：nextTick(callback) 是全局的方法；而 $nextTick(callback) 是回调的 this 自动绑定到调用它的实例上；所以用的更的是$nextTick(callback)！

钥沅
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue React 各种大乱炖 对比
cofecode的博客
08-13 613
/ Vue React 单文件直接引入 vue.js react.js + react-dom.js + babel.js 虚拟DOM √ √ 虚拟DOM区域（挂载区域） el 参数值 ReactDOM.render() 第二个参数值 数据驱动 √ √ Model数据源 初始化，定义在data:{} 或 data () { return {} }里 在state里 ...
从 javascript 事件循环看 Vue.nextTick 的原理和执行机制
闲聊的互联网
04-26 427
Vue 的特点之一就是响应式，但是有些时候数据更新了，我们看到页面上的 DOM 并没有立刻更新。如果我们需要在 DOM 更新之后再执行一段代码时，可以借助 nextTick 实现。 我们先来看一个例子 export default { data() { return { msg: 0 } }, mounted() { thi...
【react】基础知识补充及原理【粗略版】
代码随想录
12-03 738
PureComonent默认给类组件添加了一个shouldComponentUpdate的钩子函数，在这个钩子中，会对新旧状态及属性做一个浅比较，以此达到优化组件渲染的目的。
nextTick
weixin_39616739的博客
07-14 155
异步更新视图 <template> <div> <div>{{test}}</div> </div> </template> export default { data () { return { test: 0 }; }, mou...
vue中nextTick函数和react类似实现
最新发布
kjl536566的博客
04-26 1430
Vue 3 仍然遵循异步更新策略，即当组件状态发生变化时，Vue 不会立即更新 DOM，而是将这些更新任务放入一个队列中。）发生变化时，React 不会立即重新渲染组件和更新 DOM，而是将这些更新操作放入一个队列中。当事件循环回到浏览器主线程时，React 会批量处理这些更新，一次性重新渲染受影响的组件并更新真实的 DOM。那样精确地绑定到 React 更新周期，但对于大多数需要在 DOM 更新后执行操作的场景来说，这两种方法通常是足够可靠的。，可以实现类似的在 DOM 更新后执行操作的需求。
this.$nextTick()的原理与使用场景
热门推荐
ych6666的博客
01-10 1万+
this.$nextTick()的原理与使用场景 遇到这个方法的时候，比较困惑，搜集一些资料，总结一下其原理和用途 官网说法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 获取更新后的DOM，言外之意就是什么操作需要用到了更新后的DOM， 而不能使用之前的DOM， 所以就衍生出了这个获取更新后的 DOM的Vue方法 DOM是如何更新的呢？ 1.原理 Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。 异步执行的运行机
深入理解Vue nextTick 机制
08-27
深入理解Vue nextTick 机制 在本文中，我们将深入探讨 Vue 中的 nextTick 机制，并了解其实现原理。 首先，让我们来看一个简单的 Vue 例子： ```javascript export default { data() { return { msg: 0 } }, ...
简单理解Vue中的nextTick方法
08-28
Vue中的nextTick方法详解 Vue中的nextTick方法是一个非常重要的概念，它涉及到Vue中DOM的异步更新。...nextTick方法是一个非常重要的概念，它可以帮助我们更好地理解Vue中DOM的异步更新，从而更好地使用Vue框架。
vue源码nextTick使用及原理解析
10-16
以下是一个简单的例子： ```javascript this.msg = 'world' let box = document.getElementsByClassName('box')[0] this.$nextTick(() => { console.log(box.innerHTML) // 输出 'world' }) ``` 2. **数据变化与...
vue面试题（v-if和v-for）（key的作用）（vue-router）（Vue性能优化）（nextTick）（Vue2）
11-15
6. [简单说一说你对vuex理解？] 7. [vue-router中如何保护路由？] 8. [你了解哪些Vue性能优化方法？] 9. [你知道nextTick吗，它是干什么的，实现原理是什么？] 10. [说一说你对vue响应式理解？] 11. [你如果想要扩展...
angular-delay:延迟执行 ngChange 回调
07-11
角延迟 延迟执行 ngChange 回调。 所有功劳都归功于“Doug R”。 安装 bower install angular-delay 使用 在您的应用程序中包含该包： angular . module ( 'app' , [ 'ngDelay' ] ) ; < input ng-model =" search " ng-change =" updateResults() " ng-delay =" 1500 " /> 在执行ng-change回调之前，这会在搜索更改后等待 1.5 秒。 在 Angular 1.3.x 中已弃用 这对 Angular 1.2.x 很有用，但它在 Angular 1.3.x 中被弃用，引入了ng-model-options ，您现在可以执行以下操作以获得与ng-delay="1500"相同的效果 < input ng-model ="
cancellable-next-tick:环绕 process.nextTick 的包装器返回一个取消函数
06-02
可取消的下一滴答 环绕 process.nextTick 的包装器返回一个取消函数 示例用法 var cancellableNextTick = require ( 'cancellable-next-tick' ) ; var cancel = cancellableNextTick ( function ( ) { // execution never reaches here } ) ; cancel ( ) ; 示例用例 看看 变更日志 1.0.3 增强模型示例 添加了标准徽章和盾牌 1.0.2 添加了“模型”示例作为用例示例 1.0.1 增强的自述文件 增强的 package.json
vue之nextTick全面解析
12-10
简介 vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。 为什么要用nextTick 请看如下一段代码 new Vue({ el: '#app', data: { list: [] }, mounted: func
【Vuejs】1993- 10 分钟了解 nextTick ，并实现简易版的 nextTick
pingan8787
01-02 64
关于本文作者：anyup链接：https://juejin.cn/post/7296016127552864297在 Vue.js 中，有一个特殊的方法nextTick，它在 DOM 更新后执行一段代码，起到等待 DOM 绘制完成的作用。本文会详细介绍nextTick的原理和使用方法，并实现一个简易版的nextTick，加深对它的理解。一. 什么是nextTick简单的说，nextTic...
带你深入了解一下vue.js中的this.$nextTick！
忧郁的蛋的专栏
12-21 1956
我们可能会问上面的输出是个啥，首先js是单线程，所以在js程序运行中只有一个执行栈，实现不了多线程，所以就需要任务均衡分配，通俗的讲，按任务急优先处理原则，js中分为同步任务和异步任务，异步任务又分为宏任务和微任务，同步任务先入栈，程序会先把执行栈中的所有同步任务执行完，再去判断是否有异步任务，而异步任务中微任务的优先级高于宏任务。如果当前执行栈为空，而微任务队列不为空，就先执行微任务，等把所有微任务执行完，最后才会考虑宏任务。我们可以看出nextTick就是一个方法，方法有两个参数：fn和this，
前端React教程第六课 认识栈调和、setState和Fiber架构
fegus的博客
05-15 499
10 React 中的“栈调和”（Stack Reconciler）过程是怎样的？ 时下 React 16 乃至 React 17 都是业界公认的“当红炸子鸡”，相比之下 React 15 似乎已经是一副黯淡无光垂垂老矣的囧相了。 在这样的时代背景下，愿意自动自发地了解 React 15 的人越来越少，这是一个令人心碎的现象。毕竟有位伟人曾经说过，“以史为镜，可以知兴替”；还有另一位伟人曾经说过，“学习知识需要建立必要且完整的上下文”——如果我们不清楚 React 15 的运作机制，就无从把握它的局限性；
由$nextTick() 理解js异步宏任务和微任务
weixin_41897122的博客
12-26 2553
在vue框架开发中，我们经常会用到this.$nextTick()方法，官方的解释是：**在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM**，那么在哪些实际场景中去使用呢，它的原理是什么呢？我们接着往下看。 this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。我们知道js是单线程，异步任务会放到事件队列中，等待同步任务执行完毕之后再执行。由于**vue中数据和dom渲染由于是异步的**，所以，要让dom结构随数据改变这样的操作都应
Vue中nexttick使用方法、作用、使用场景
m0_45884629的博客
05-22 468
Vue中的nexttick
对 nexttick 的理解
05-12
nextTick 是 Vue.js 中的一个 API，用于在下一个 DOM 更新周期之后执行一个回调函数。它的作用是将回调函数推迟到 DOM 更新之后执行，以确保在回调函数执行时，所依赖的 DOM 元素已经被更新了。 具体来说，当我们...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值