はじめに

Vue.js の公式ドキュメントをもとに学び直しのメモを残していく。

やること

自分用のメモを残す
自分の理解が曖昧な部分を見る・学ぶ
わかりにくいところはコードを残す

やらないこと

1から10まで学び直す
JS, TS の理解の深掘り

上かるび

「基本」編

アプリケーションのインスタンス API

createSSRApp()
SSR hydration モードでアプリケーションインスタンスを作成する。

SSR hydration モードとは
hydration = サーバーサイドとクライアントサイドのイベントハンドラの紐付け作業

参考：

上かるび

イベントハンドリング編

イベント装飾子 Event Modifiers

.passiveは、モバイル機器のパフォーマンス改善のためのタッチベントリスナーで使用される。

<div @scroll.passive="onScroll">...</div>

どういうことか

以下のようにpassiveをtrueにするとパフォーマンスを最適化できる。

/* 機能検出 */
let passiveIfSupported = false;

try {
  window.addEventListener(
    "test",
    null,
    Object.defineProperty({}, "passive", {
      get() {
        passiveIfSupported = { passive: true };
      },
    }),
  );
} catch (err) {}

window.addEventListener(
  "scroll",
  (event) => {
    /* 何かを行う */
    // event.preventDefault(); は使用できない
  },
  passiveIfSupported,
);

なぜ最適化できるのか？

addEventListener()がfalseの場合、タッチイベントやホイールイベントを扱うイベントリスナーがスクロール処理しようとしている間に、ブラウザのメインスレッドをブロックする（スクロール処理中の性能が大幅に低下する）可能性があるため。

passiveをtrueにすることで回避できる。