溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了VUE如何實時監聽元素距離頂部高度，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
效果圖如下所示
.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 id="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 id="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如何實時監聽元素距離頂部高度有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
