美文网首页
关于nextTick

关于nextTick

作者: 蓝蓝红同学 | 来源:发表于2022-05-23 09:21 被阅读0次

nextTick

在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用该方法,获取更新后的DOM。

简单而言,就是当数据更新并在DOM中渲染后,便自动执行该函数

举例说明:

不使用nextTick

此时DOM已经更新,但对DOM进行操作打印出的DOM数据还是更新前的数据

使用nextTick

DOM更新后,立即调用nextTick中的函数,打印的数据是更新后的数据

在vue中更新DOM是异步进行的,这是nextTick的主要应用的场景和原因

常用场景

1.created生命周期的DOM操作

    在created钩子函数执行时,DOM结构还未进行渲染,此时直接对DOM进行操作没有任何作用,甚至无法获取DOM结构发生报错

    同样的,在mounted钩子函数执行时,DOM结构挂载完成,此时可获取DOM结构,对DOM进行操作时,可获取DOM,但因为DOM的更新是异步进行,所以此时不使用nextTick获取的DOM结构会是更新前的DOM结构

不使用nextTick 使用nextTick

2.使用某些第三方插件时

    在使用某些第三方插件或库时,希望在页面dom发生改变时重新加载插件,例如popper.js、swiper等等

3.DOM更新时需要使用到新的页面数据时

    当重新渲染元素,需求想要拿到元素的属性,可使用nextTick获取更新后的内容

相关文章

网友评论

      本文标题:关于nextTick

      本文链接:https://www.haomeiwen.com/subject/clfekltx.html