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

最新推荐文章于 2023-09-03 21:09:09 发布

Sunshinedada

最新推荐文章于 2023-09-03 21:09:09 发布

阅读量938

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Sunshinedada/article/details/130794910

版权

$nextTick用于在DOM更新后执行回调，确保数据变化后能访问到最新的DOM结构。在数据变化、需要依赖新DOM状态的操作，或如created钩子中的DOM操作，都常使用此方法。它基于JavaScript的EventLoop，等待下一次时间片执行，保证了DOM的同步更新。

摘要由CSDN通过智能技术生成

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()的回调函数中。