VUE如何实时监听元素距离顶部高度

　　介绍

这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

<>强效果图如下所示

VUE如何实时监听元素距离顶部高度

<强>。html

& lt; !——监听ref距离顶部高度——比; 　　& lt; div ref=皃ronbit"祝辞 　　& lt; div>今日热门& lt;/div> 　　& lt; div>今日热销& lt;/div> 　　& lt;/div>

<强>。js

安装(){ 　　window.addEventListener(& # 39;滚动# 39;,this.handleScrollx,真的) 　　}， 　　方法:{ 　　handleScrollx () { 　　console.log(& # 39;滚动高度& # 39;,window.pageYOffset) 　　console.log(& # 39;距离顶部高度& # 39;,这一点。美元refs.pronbit.getBoundingClientRect直()上) 　　}， 　　}

<>强Vue异步更新队列及美元nextTick的使用

<强>问题一:什么是nextTick美元?

因为Vue的异步更新队列,nextTick美元是用来知道什么时候DOM更新完成的。

<强>详细解读:

我们先来看这样一个场景:有一个div,默认用v如果将它隐藏,点击一个按钮后,改变v的值,让它显示出来,同时拿到这个div的文本内容。如果v的值是false,直接去获取div内容是获取不到的,因为此div时还没有被创建出来,那么应该在点击按钮后,改变v的值为true, div才会被创建,此时再去获取,示例代码如下:

 & lt; div id=癮pp"比;
　　& lt; div id=癲iv"v=皊howDiv"祝辞;这是一段文本& lt;/div>
　　& lt;按钮@click=癵etText"祝辞获取div内容& lt;/button>
　　& lt;/div>
　　& lt; script>
　　应用var=new Vue ({
　　埃尔:“# app"
　　数据:{
　　showDiv:假
　　}，
　　方法:{
　　getText:函数(){
　　这一点。showDiv=true;
　　var文本=. getelementbyid (& # 39; div # 39;) .innnerHTML;
　　console.log(文本);
　　}
　　}
　　}）
　　& lt;/script>

这段代码并不难理解,但是运行后在控制台会抛出一个错误:无法读取属性& # 39;innnerHTML零的意思就是获取不到div元素。这里就涉及Vue一个重要的概念:异步更新队列。

<强>异步更新队列

Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作,然后,在下一个事件循环中,Vue刷新队列并执行实际(已去重的)工作,所以如果你用一个为循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是一个很大的开销。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver,如果都不支持,就会采用setTimeout代替。

知道了Vue异步更新DOM的原理,上面示例的报错也就不难理解了。事实上,在执行。showDiv=true时,div仍然还是没有被创建出来,直到下一个vue事件循环时,才开始创建。美元nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:

 & lt; div id=癮pp"比;
　　& lt; div id=癲iv"v=皊howDiv"祝辞;这是一段文本& lt;/div>
　　& lt;按钮@click=癵etText"祝辞获取div内容& lt;/button>
　　& lt;/div>
　　& lt; script>
　　应用var=new Vue ({
　　埃尔:“# app"
　　数据:{
　　showDiv:假
　　}，
　　方法:{
　　getText:函数(){
　　这一点。showDiv=true;
　　美元。nextTick(函数(){
　　var文本=. getelementbyid (& # 39; div # 39;) .innnerHTML;
　　console.log(文本);
　　}）;
　　}
　　}
　　}）
　　& lt;/script>

这时再点击事件,控制台就打印出div的内容”这是一段文本”了。

理论上,我们应该不用去主动操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如波普尔。js,读卡器等,这些基于原生javascript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用时,就要利用好nextTick美元。

VUE如何实时监听元素距离顶部高度