vue.nextTick()是什么及怎么用
这篇文章主要介绍了vue.nextTick()是什么及怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue.nextTick()是什么及怎么用文章都会有所收获，下面我们一起来看看吧。
概念
在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM
简单理解：
为了去解决数据更新了但是视图不更新的问题，当数据更新了，在DOM渲染后，自动执行该函数
原理
Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
举例
通过例子可以看到这样的话最终输出的值还是原来的值，下面再看一下使用this.$nextTick()会发生什么？
通过这个例子就可以明显的看到this.$nextTick()的作用。
注意：
vue实现响应并不是数据发生变化之后DOM立即变化。而是按照一定的策略进行DOM的更新，在使用this.$nextTick()以后，就可以在他的回调中获取到更新后的DOM
应该什么时候使用vue.$nextTick()呢？
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
当项目中你想在改变DOM元素的数据后基于新的dom做点什么，**对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；**通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
{{ message }}
关于"vue.nextTick()是什么及怎么用"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue.nextTick()是什么及怎么用"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
