nextTick
在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用该方法,获取更新后的DOM。
简单而言,就是当数据更新并在DOM中渲染后,便自动执行该函数
举例说明:
![](https://img.haomeiwen.com/i26021157/ee14e7170a538aac.png)
此时DOM已经更新,但对DOM进行操作打印出的DOM数据还是更新前的数据
![](https://img.haomeiwen.com/i26021157/a4abd1a3489a2b16.png)
DOM更新后,立即调用nextTick中的函数,打印的数据是更新后的数据
在vue中更新DOM是异步进行的,这是nextTick的主要应用的场景和原因
常用场景
1.created生命周期的DOM操作
在created钩子函数执行时,DOM结构还未进行渲染,此时直接对DOM进行操作没有任何作用,甚至无法获取DOM结构发生报错
同样的,在mounted钩子函数执行时,DOM结构挂载完成,此时可获取DOM结构,对DOM进行操作时,可获取DOM,但因为DOM的更新是异步进行,所以此时不使用nextTick获取的DOM结构会是更新前的DOM结构
![](https://img.haomeiwen.com/i26021157/862418e861211031.png)
![](https://img.haomeiwen.com/i26021157/4a4364c2d8906f35.png)
2.使用某些第三方插件时
在使用某些第三方插件或库时,希望在页面dom发生改变时重新加载插件,例如popper.js、swiper等等
3.DOM更新时需要使用到新的页面数据时
当重新渲染元素,需求想要拿到元素的属性,可使用nextTick获取更新后的内容
网友评论