vue中$nextTick()作用

vue更新数据是异步的

1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了

$nextTick(() => {}) 与DOM相关操作写在该函数回调中，确保DOM已渲染

什么是Vue.nextTick()

官方文档解释如下：

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。

在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中

补充说明:

楼主，我发现你说的有一个问题，不知道我说得对不对，就是“与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成...”，根据官方文档“Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted”，它意思是，mounted函数里面，只是说vm.$el被挂载到了Vue实例了，但所有dom还没渲染完成，我猜可能正在渲染，如需等到所有dom被渲染完成后做某些动作，需在mounted函数里面的vm.$nextTick函数中写。如有错请指教。