您现在的位置:首页 >> 前端 >> 内容

vue生命周期讲解、vm.$nextTick( [callback] )函数的用法

时间:2017/11/4 11:49:23 点击:

  核心提示:vue生命周期中提供了created,mounted方法,可以在页面初始化时候获取一些页面需要的数据,但是有的时候需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,...

vue生命周期中提供了created,mounted方法,可以在页面初始化时候获取一些页面需要的数据,但是有的时候需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,一开始没有发现vm.$nextTick( [callback] )方法时,使用定时器setInterval来循环判断元素是否存在,存在后设置事件,取消定时器,但是该方法实在不好,后来阅读vue文档时发现vm.$nextTick( [callback] )函数。

vm.$nextTick( [callback] )函数的用法:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

因此可以在created或者mounted函数中使用vm.$nextTick( [callback] )函数,来为需要添加事件的dom元素添加事件

Tags:VU UE E生 生命 
作者:网络 来源:hanxue_tyc