效果圖如下所示

.html

<!-- 監(jiān)聽(tīng)ref距離頂部高度 -->
<div ref="pronbit">
 <div>今日熱門(mén)</div>
 <div>今日熱銷</div>
</div>

.js

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

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

問(wèn)題一：什么是$nextTick？

簡(jiǎn)單回答：

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

詳細(xì)解讀：

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

  <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>

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

異步更新隊(duì)列

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

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

知道了Vue異步更新DOM的原理，上面示例的報(bào)錯(cuò)也就不難理解了。事實(shí)上，在執(zhí)行this.showDiv = true時(shí)，div仍然還是沒(méi)有被創(chuàng)建出來(lái)，直到下一個(gè)vue事件循環(huán)時(shí)，才開(kāi)始創(chuàng)建。$nextTick就是用來(lái)知道什么時(shí)候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>

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

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

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

最新評(píng)論