Vue中的nextTick是用来做什么的,解决什么问题的-M

Vue中的nextTick是用来做什么的,解决什么问题的

Vue 的 nextTick 其本质是对 JavaScript 执行原理,时间循环机制 EventLoop 的一种应用。
$nextTick接收一个函数作为参数,在下一个时间片执行该函数的方法。或者说在浏览器初次加载或因为某些操作导致Dom树渲染,让所有的Dom节点加载完毕之后执行的回调。通常用于执行一个方法时,Dom节点还未加载成功时。
Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
Vue采用了数据驱动视图的思想,但是在一些情况下,仍然需要操作DOM。有时候,可能遇到这样的情况,DOM1的数据发生了变化,而DOM2需要从DOM1中获取数据,那这时就会发现DOM2的视图并没有更新,这时就需要用到了nextTick了。

由于Vue的DOM操作是异步的,所以,在上面的情况中,就要将DOM2获取数据的操作写在$nextTick中。

this.$nextTick(() => {
    
    
    // 获取数据的操作...
})

所以,在以下情况下,会用到nextTick:

在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的DOM结构的时候,这个操作就需要方法在nextTick()的回调函数中。
在vue生命周期中,如果在created()钩子进行DOM操作,也一定要放在nextTick()的回调函数中。
因为在created()钩子函数中,页面的DOM还未渲染,这时候也没办法操作DOM,所以,此时如果想要操作DOM,必须将操作的代码放在nextTick()的回调函数中。

猜你喜欢

转载自blog.csdn.net/Sunshinedada/article/details/130794910