效果圖如下所示

.html

<!-- 監聽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) },}

補充知識：Vue異步更新隊列 及 $nextTick的使用

問題一：什么是$nextTick？

簡單回答：

因為Vue的異步更新隊列，$nextTick是用來知道什么時候DOM更新完成的。

詳細解讀：

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

<div id='app'> <div v-if='showDiv'>這是一段文本</div> <button @click='getText'>獲取div內容</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>

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

異步更新隊列

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

Vue會根據當前瀏覽器環境優先使用原生的Promise.then和MutationObserver，如果都不支持，就會采用setTimeout代替。

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

<div id='app'> <div v-if='showDiv'>這是一段文本</div> <button @click='getText'>獲取div內容</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>

這時再點擊事件，控制臺就打印出div的內容“這是一段文本“了。

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

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