Vue.nextTick
在下次
DOM
更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM
。
获取更新后的DOM
言外之意就是什么操作需要用到了更新后的DOM
而不能使用之前的DOM
或者使用更新前的DOM
会出问题,所以就衍生出了这个获取更新后的 DOM
的Vue
方法。所以放在Vue.nextTick()
回调函数中的执行的应该是会对DOM
进行操作的 js
代码
使用场景
在
vue
生命周期的created()
钩子进行DOM
操作一定要放在Vue.nextTick()
的回调函数中 ,原因是在created()
钩子函数执行的时候DOM
其实并未进行任何渲染,而此时进行DOM
操作无异于徒劳,所以此处一定要将DOM
操作的js
代码放进Vue.nextTick()
的回调函数中。在数据变化后要执行的某个操作,当你设置
vm.someData = 'new value'
,DOM
并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM
更新。如果此时你想要根据更新的DOM
状态去做某些事情,就会出现问题。为了在数据变化之后等待Vue
完成更新DOM
,可以在数据变化之后立即使用Vue.nextTick(callback)
。这样回调函数在DOM
更新完成后就会调用。mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用vm.$nextTick
替换掉mounted
:1
2
3
4
5
6
7mounted () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}由于
Vue.nextTick()
是异步执行的, 所以可以使用async / await
将代码写成同步的形式。