Vue在页面数据渲染完成之后的调用方法

这篇文章主要为大家详细介绍了Vue在页面数据渲染完成之后的调用方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。之前在使用jquery的时候，有ready可以帮助我们实现，但是Vue不存在此类方法，我们需要结合watch和this.$nextTick()来实现。

 

nextTick：

在下次 DOM 更新循环结束之后执行延迟回调。

 

 

watch：

用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

 

 

之前我是这样子使用nextTick的：

 

代码如下：

mounted:{

this.$nextTick(function(){

/////方法

})

}

经测试发现实现不了所需要的效果，只有结构，没有数据，即获取不到想要的高度

 

后发现需要结合watch监听某个属性：

 

代码如下：

watch:{

asyncArray:function()

 this.$nextTick(function(){
  //////方法
 });
}
}

 

经测试可用！

 

以上这篇Vue在页面数据渲染完成之后的调用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/6308-0.html

注：关于Vue在页面数据渲染完成之后的调用方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js