vue里的nextTick回调函数
Posted goloving
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue里的nextTick回调函数相关的知识,希望对你有一定的参考价值。
vue里面本身带有两个回调函数:
一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。
栗子:
<ul id="demo"> <li v-for="item in list">{{item}}</div> </ul> new Vue({ el:‘#demo‘, data:{ list=[0,1,2,3,4,5,6,7,8,9,10] }, methods:{ push:function(){
this.list.push(11); this.nextTick(function(){
alert(‘数据已经更新‘)
}); this.$nextTick(function(){
alert(‘v-for渲染已经完成‘)
}) } } })
什么是Vue.nextTick()
官方文档解释如下:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
什么时候需要用Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢?
原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
以上是关于vue里的nextTick回调函数的主要内容,如果未能解决你的问题,请参考以下文章