效果圖如下所示

.html

<!-- 監(jiān)聽ref距離頂部高度 --><div ref='pronbit'> <div>今日熱門</div> <div>今日熱銷</div></div>

.js

mounted(){ window.addEventListener(’scroll’,this.handleScrollx,true)},methods: { handleScrollx() { console.log(’滾動高度’,window.pageYOffset) console.log(’距離頂部高度’,this.$refs.pronbit.getBoundingClientRect().top) },}

補(bǔ)充知識：Vue異步更新隊(duì)列 及 $nextTick的使用

問題一：什么是$nextTick？

簡單回答：

因?yàn)閂ue的異步更新隊(duì)列，$nextTick是用來知道什么時候DOM更新完成的。

詳細(xì)解讀：

我們先來看這樣一個場景：有一個div，默認(rèn)用 v-if 將它隱藏，點(diǎn)擊一個按鈕后，改變 v-if 的值，讓它顯示出來，同時拿到這個div的文本內(nèi)容。如果v-if的值是 false，直接去獲取div內(nèi)容是獲取不到的，因?yàn)榇藭rdiv還沒有被創(chuàng)建出來，那么應(yīng)該在點(diǎn)擊按鈕后，改變v-if的值為 true，div才會被創(chuàng)建，此時再去獲取，示例代碼如下：

<div id='app'> <div v-if='showDiv'>這是一段文本</div> <button @click='getText'>獲取div內(nèi)容</button> </div> <script> var app = new Vue({ el : '#app', data:{ showDiv : false }, methods:{ getText:function(){this.showDiv = true;var text = document.getElementById(’div’).innnerHTML; console.log(text); } } }) </script>

這段代碼并不難理解，但是運(yùn)行后在控制臺會拋出一個錯誤：Cannot read property ’innnerHTML of null，意思就是獲取不到div元素。這里就涉及Vue一個重要的概念：異步更新隊(duì)列。

異步更新隊(duì)列

Vue在觀察到數(shù)據(jù)變化時并不是直接更新DOM，而是開啟一個隊(duì)列，并緩沖在同一個事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。在緩沖時會去除重復(fù)數(shù)據(jù)，從而避免不必要的計算和DOM操作。然后，在下一個事件循環(huán)tick中，Vue刷新隊(duì)列并執(zhí)行實(shí)際（已去重的）工作。所以如果你用一個for循環(huán)來動態(tài)改變數(shù)據(jù)100次，其實(shí)它只會應(yīng)用最后一次改變，如果沒有這種機(jī)制，DOM就要重繪100次，這固然是一個很大的開銷。

Vue會根據(jù)當(dāng)前瀏覽器環(huán)境優(yōu)先使用原生的Promise.then和MutationObserver，如果都不支持，就會采用setTimeout代替。

知道了Vue異步更新DOM的原理，上面示例的報錯也就不難理解了。事實(shí)上，在執(zhí)行this.showDiv = true時，div仍然還是沒有被創(chuàng)建出來，直到下一個vue事件循環(huán)時，才開始創(chuàng)建。$nextTick就是用來知道什么時候DOM更新完成的，所以上面的示例代碼需要修改為：

<div id='app'> <div v-if='showDiv'>這是一段文本</div> <button @click='getText'>獲取div內(nèi)容</button> </div> <script> var app = new Vue({ el : '#app', data:{ showDiv : false }, methods:{ getText:function(){this.showDiv = true;this.$nextTick(function(){ var text = document.getElementById(’div’).innnerHTML; console.log(text); }); } } }) </script>

這時再點(diǎn)擊事件，控制臺就打印出div的內(nèi)容“這是一段文本“了。

理論上，我們應(yīng)該不用去主動操作DOM，因?yàn)閂ue的核心思想就是數(shù)據(jù)驅(qū)動DOM，但在很多業(yè)務(wù)里，我們避免不了會使用一些第三方庫，比如 popper.js、swiper等，這些基于原生javascript的庫都有創(chuàng)建和更新及銷毀的完整生命周期，與Vue配合使用時，就要利用好$nextTick。

以上這篇VUE實(shí)時監(jiān)聽元素距離頂部高度的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。