效果圖如下所示

.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)
 },
}

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

問題一：什么是$nextTick？

簡單回答：

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

詳細解讀：

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

  <div id="app">
    <div id="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>

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

異步更新隊列

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

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

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

  <div id="app">
    <div id="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>

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

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

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

最新評論