vue 中 this.$nextTick()说明及使用

2024-06-28 07:41:12

$nextTick

　　Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来

　 Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom

在以下两个情况下需要用到Vue.nextTick()

1、Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行任何渲染，此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

　　与之对应的就是mounted 钩子函数，因为该函数执行时所有的DOM挂载和渲染都已完成，此时再钩子函数中进行任何DOM操作都不会有问题。

2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放进Vue.nextTick() 的回调函数中

简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()

vue 中 this.$nextTick()说明及使用相关推荐

Vue中的$nextTick有什么作用？
Vue中的$nextTick有什么作用? 官方定义在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成,Vue 在更新 D ...
vue中this.$nextTick()的使用---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记017
this.$nextTick(() => {this.isUpdateTable = true;; }) 可以看到在vue中我们使用,更新一些变量的时候,用了这个this.$nextTick函数 ...
vue中this.$nextTick()使用解析
原理 vue中数据和dom渲染由于是异步的,所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中. this.$nextTick 作用是可以将回调延迟到下次DO ...
Vue中的$nextTick
如果面试官问你,怎么样实现一个网站切换皮肤的方案呢? 以前想的是直接用一个配置文件配置几种状态,然后用js根据配置文件设置一下就好了. 面试官回:这只是一个大概思路的,不够具体,你能说一下具体细节吗? ...
vue 中的nextTick
在vue生命周期的created() 钩子函数进行DOM操作一定要放在vue.nextTick()的回调函数中. 因为在created() 钩子函数执行时,DOM其实并未进行任何的渲染,所以执行DOM ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...
vue中的nextTick
vue.nextTick的官方定义是: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 实际上也就是传进来的函数延迟到dom更新后再使用,也就是延 ...
Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
vue 判断一个数是否在数组中_高级前端进阶，vue如何实现$nextTick
前言: 本文需要一定的事件循环相关知识,想了解事件循环的小伙伴可以看这里. 本文要弄明白下面两件事: $nextTick什么时候执行 vue中nextTick与$nextTick区别 1.查看源码中 ...

最新文章

热门文章