vue源碼的使用示例

這篇文章主要介紹了vue源碼的使用示例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

passive

  var supportsPassive = false;
  if (inBrowser) {
    try {
      var opts = {};
      Object.defineProperty(opts, 'passive', ({
        get: function get () {
          /* istanbul ignore next */
          supportsPassive = true;
        }
      })); // https://github.com/facebook/flow/issues/285
      window.addEventListener('test-passive', null, opts);
    } catch (e) {}
  }

這里核心是檢查是否支持Passive，
tips

• 1, passive是什么？Chrome提出的一個(gè)新的瀏覽器特性：Web開發(fā)者通過一個(gè)新的屬性passive來告訴瀏覽器，當(dāng)前頁面內(nèi)注冊的事件監(jiān)聽器內(nèi)部是否會調(diào)用preventDefault函數(shù)來阻止事件的默認(rèn)行為，以便瀏覽器根據(jù)這個(gè)信息更好地做出決策來優(yōu)化頁面性能。當(dāng)屬性passive的值為true的時(shí)候，代表該監(jiān)聽器內(nèi)部不會調(diào)用preventDefault函數(shù)來阻止默認(rèn)滑動行為，Chrome瀏覽器稱這類型的監(jiān)聽器為被動（passive）監(jiān)聽器。目前Chrome主要利用該特性來優(yōu)化頁面的滑動性能，所以Passive Event Listeners特性當(dāng)前僅支持mousewheel/touch相關(guān)事件
• 2, Passive Event Listeners特性是為了提高頁面的滑動流暢度而設(shè)計(jì)的，頁面滑動流暢度的提升，直接影響到用戶對這個(gè)頁面最直觀的感受。這個(gè)不難理解，想象一下你想要滑動某個(gè)頁面瀏覽內(nèi)容，當(dāng)你用鼠標(biāo)滾輪或者用手指觸摸屏幕上下滑動的時(shí)候，頁面并沒有按你的預(yù)期進(jìn)行滾動，此時(shí)你內(nèi)心往往會感覺到一絲不爽，甚至想放棄該頁面。Facebook之前做了一項(xiàng)試驗(yàn)，他們將頁面滑動的響應(yīng)刷新率從60FPS降低到30FPS的時(shí)候，發(fā)現(xiàn)用戶的參與度急速下降。
• 3,passive的簡單實(shí)現(xiàn)

function handler(event) {
        console.log(event.type); // log event type
    }
document.addEventListener("mousewheel", handler, {passive:true});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue源碼的使用示例內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!