Vueのソースコード解析（コード例）

この記事では、vue のソースコード解析 (コード例) を紹介します。一定の参考価値があるので、困っている友人が参考になれば幸いです。あなたを助けます。

今日はソースコードを読んだのですが、メモをとりながら読んだのでゆっくり読みました。突然ある機能を発見しました。ということで別記事に書きます。

これは見せびらかしの機能のように感じますが、ある日面接官に最適化されたページを見つけたかどうか尋ねられた場合、
あなたは、ブラウザがこの機能を使用できるかどうかを確認することを提案します。スクロールの滑らかさを向上させます。

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 によって提案された新しいブラウザ機能: Web 開発者は、新しい属性 passive を使用して、現在のページに登録されているイベント リスナーが、イベントのデフォルトの動作を防止するために、preventDefault 関数を呼び出すかどうかをブラウザに伝えます。これにより、ブラウザは次に従って動作できるようになります。この情報は、ページのパフォーマンスを最適化するためのより適切な意思決定を行うために役立ちます。属性passiveの値がtrueの場合、デフォルトのスライド動作を防止するために、リスナー内でpreventDefault関数が内部的に呼び出されないことを意味します。Chromeブラウザは、このタイプのリスナーをパッシブリスナーと呼びます。現在、Chrome は主にページのスライド パフォーマンスを最適化するためにこの機能を使用しているため、パッシブ イベント リスナー機能は現在、マウスホイール/タッチ関連イベント
• 2 のみをサポートしています。パッシブ イベント リスナー機能は、ページのスライドの滑らかさ デザイン とページのスライドの滑らかさの向上は、このページに対するユーザーの最も直感的な感覚に直接影響します。これは理解するのが難しいことではありません。あるページをスライドしてコンテンツを参照したいとします。マウス ホイールを使用したり、指で画面に触れて上下にスライドしたりすると、ページは期待どおりにスクロールしません。このとき、私は少し不満を感じ、ページを放棄したくなることさえあると感じるでしょう。 Facebook が以前に実験を行ったところ、ページ スライドの応答リフレッシュ レートを 60FPS から 30FPS に下げたところ、ユーザーの参加が急激に低下したことがわかりました。
• 3, パッシブの簡単な実装

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

この記事はここで終了です。その他の興味深いコンテンツについては、PHP 中国語の に注目してください。ウェブサイト. JavaScript チュートリアル ビデオ コラム!

以上がVueのソースコード解析（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。