关于Vue.js中this.$nextTick()的理解

最新推荐文章于 2022-12-21 22:25:15 发布
最新推荐文章于 2022-12-21 22:25:15 发布
阅读量434 收藏
点赞数
分类专栏： 笔记 文章标签： vue javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CanMoHaiYan/article/details/109713086
版权

关于Vue.js中this.$nextTick()的理解

用法：this.$nextTick() 接受一个回调函数作为参数

因为Vue中DOM更新是异步的，假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现。
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

以下是我的实际应用：
在这里插入图片描述
解析：当需要要文本框自动获得焦点时，此时文本框 dom 结构可能还未被渲染出来，所以会存在 $refs 获取 dom 失败，所以如果在外层包一层 this.$nextTick 那么就能够保证 focus() 一定是在文本框 dom 结构渲染完毕才执行啦。

残墨海颜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中nextTick的实现原理
垂钓老翁的博客
04-01 416
vue中nextTick模块的代码大概110行。比较容易理解。模块所在的目录结构为：vue-dev\src\core\util\next-tick.js。 nextTick方法有两个参数：参数一为加入异步任务队列的回调函数；参数二为传入的绑定的环境上下文，也叫执行上下文。 源码如下： /* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' import { handleError } from './err
vue中nextTick用法实例
01-19
什么是Vue.nextTick() 官方文档解释如下： 在下次 DOM 更新循环结束...所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper扩展包的 var swiper = new Swiper('.swiper-container',
Vue06/Vue中this.$nextTick( ) 的用法及详细介绍
m0_64494670的博客
11-04 5208
Vue06/Vue中this.$nextTick( ) 的用法及详细介绍
带你深入了解一下vue.js中的this.$nextTick！
忧郁的蛋的专栏
12-21 1950
我们可能会问上面的输出是个啥，首先js是单线程，所以在js程序运行中只有一个执行栈，实现不了多线程，所以就需要任务均衡分配，通俗的讲，按任务急优先处理原则，js中分为同步任务和异步任务，异步任务又分为宏任务和微任务，同步任务先入栈，程序会先把执行栈中的所有同步任务执行完，再去判断是否有异步任务，而异步任务中微任务的优先级高于宏任务。如果当前执行栈为空，而微任务队列不为空，就先执行微任务，等把所有微任务执行完，最后才会考虑宏任务。我们可以看出nextTick就是一个方法，方法有两个参数：fn和this，
vue this.$nextTick()的用法
qq_43183527的博客
08-05 803
动态路由匹配 我们经常把某种模式匹配到的所有路由，全都映射到同个组件。 例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。 那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果： const User = { template:'<div>User</div&gt...
vue中this.$nextTick()的理解
qq_35269556的博客
02-23 462
如何理解this.$nextTick()，vue中this.$nextTick()的使用场景是什么
详解vue中$nextTick和$forceUpdate的用法
12-13
1、 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 2、 因为在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将 DOM...
vue中$nextTick的用法讲解
12-07
在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有...
vue.js实现请求数据的方法示例
01-19
vue2.0示例代码如下： var vm = new Vue({ el:#list, ... this.$nextTick(function () { this.$http.jsonp('http://***.com').then(function(res) { console.log(res.data) this.gridData = res.data;
Vue中的nextTick方法的作用是什么？
最新发布
10-17
Vue 中的 nextTick 方法 Vue 中的 nextTick 方法是一种异步回调机制，它允许开发者在 DOM 更新循环结束之后执行特定的操作。nextTick 方法的主要作用是提供了一种方式，在 DOM 更新后执行回调函数，从而确保在操作...
this.$nextTick()的理解及使用
lzfengquan的博客
07-20 1万+
将回调延迟到下次 DOM 更新循环之后执行。 在修改数据之后立即使用它， 然后等待 DOM 更新。 它跟全局方法 Vue.nextTick 一样， 不同的是回调的 this 自动绑定到调用它的实例上。 代码看看 <template> <section> <h1 ref="hello">{{ value }}</h1> <button type="danger" @click="get">点击</button> &
this.$nextTick的用法和原理
欢迎来到我的博客
09-14 2万+
先来看一下我遇到的问题，万一以后你们遇到了也可以尝试这样解决 文章有点长，耐心看完 vue项目中使用轮播图 效果： 使用swiper动态加载数据,动态轮播数据显示为空。在网上看了很多博主都是说 保证在数据请求之后再渲染页面 ...
vue watch nextTick 获取参数
还不是【web】的博客
12-15 2798
在vue中，使用watch来响应数据的变化。 1:普通的使用方式 &lt;input type="text" v-model="cityName"/&gt; new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ...
this.$nextTick
杨前露的博客
06-22 1万+
首先我们先来看看官方介绍的用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。理解：1.总结来说， 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setT...
VUE中Vue.nextTick()和this.$nextTick()怎么使用？
Power的博客
01-02 4万+
VUE,Vue.nextTick(),this.$nextTick()
vue中的this.nextTick()
每一步的地方，每一站都不会忘。
03-27 3571
定义：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的dom。 所以就出了这个获取更新后的DOM的vue方法，因此放在this.$nextTick()回调函数中的执行的是会对Dom进行操作的js代码。 理解：vue在解析dom的时候并不是执行一条语句就解析一次dom，想象这样一个案例，一个输入框，我想要在点击按钮的时候可编辑这个输入框的内容，并且获取到该输入框的焦点，如果按照我们正常的思路来写，应该是在执行完可编辑之后加一条获取焦点的语句，运行的会发现并没有获取到焦点，
【vue笔记】this.$nextTick()
AXIMI的博客
05-13 1796
this.$nextTick()在DOM更新循环之后执行延迟回调，在修改数据之后使用这个方法可以获取更新后的DOM，例如： // 修改数据 this.message='changed' console.log(this.$el.textContent) // 输出的是原message的数据，因为重新设置message后，DOM还没有更新 Vue.nextTick*(function(){ co...
个人理解this.$nextTick()的使用场景
热门推荐
如影随风
07-16 4万+
最近有在一个老项目的html页面中使用vue和echarts，点击按钮后需要重新渲染echart图标,但是echart却报错：Can't get dom width or height。可以很清楚知道是由于echarts获取不到宽度和高度，我试过使用this.$refs来过去元素的宽高，但还是失败了，所以，我觉得还是dom渲染问题，那么此时快速的解决办法就是使用this.$nextTick()方法...
Vue.js中this.$nextTick()的使用
weixin_42794873的博客
03-02 275
this.$nextTick()中的函数会在下一次DOM更新完后执行，它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象 通过this.$nextTick()获取到的值为dom更新之后的值 ...
在vue项目中的.js文件中如何使用$nextTick()
05-18
在 Vue.js 中，$nextTick 方法可以在 DOM 更新完成后执行回调函数。这个方法非常有用，因为有时候我们需要在 DOM 更新之后才能执行一些操作。 在 .js 文件中使用 $nextTick 方法，需要先在模板中绑定一个 ref，然后通过 this.$refs 获取到该元素的引用，然后在 $nextTick 回调函数中执行相应的操作。示例代码如下： ``` <template> <div ref="myDiv">{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello world!' } }, mounted() { this.$nextTick(() => { // 获取 myDiv 的引用 const myDiv = this.$refs.myDiv // 在 DOM 更新完成后执行操作 console.log(myDiv.textContent) // 输出：Hello world! }) } } </script> ``` 在上面的代码中，我们在模板中绑定了一个 ref，然后在 mounted 钩子函数中调用 $nextTick 方法，在回调函数中获取到 myDiv 的引用，并输出其中的文本内容。需要注意的是，$nextTick 方法只有在 Vue 实例已经挂载到 DOM 上之后才能正常工作，所以我们将其放在 mounted 钩子函数中调用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值