知っておくべき 25 の Vue のヒント

知っておくべき 25 の Vue のヒント

1. プロパティを型リストに制限する

prop定義でvalidatorオプションを使用すると、 prop特定の値のセットに制限できます。

エクスポートデフォルト{
  名前: '画像',
  小道具: {
    ソース: {
      タイプ: 文字列、
    },
    スタイル: {
      タイプ: 文字列、
      バリデータ: s => ['square', 'rounded'].includes(s)
    }
  }
};

このvalidator関数はpropを受け入れ、 trueまたはfalseを返します。ブール値で許可されるよりも多くのオプションが必要な場合にも使用できます。ボタン タイプやアラート タイプ (情報、成功、危険、警告) は、より一般的な用途の一部です。

2. デフォルトのコンテンツと拡張ポイント

Vue のスロットにはデフォルトのコンテンツを設定できるため、より使いやすいコンポーネントを作成できます。

<button class="button" @click="$emit('click')">
  <スロット>
    <!-- スロットが指定されていない場合に使用されます -->
    クリックしてください
  </スロット>
</ボタン>

基本的に、コンポーネントの任意の部分を取得してslotにラップし、コンポーネントのその部分を任意のもので上書きすることができます。デフォルトでは通常どおり動作しますが、さらにいくつかのオプションから選択することもできます。

<テンプレート>
  <button class="button" @click="$emit('click')">
    <!-- 最初は何もしないスロットタグを追加します -->
    <!-- スロットにコンテンツを提供することでこれを上書きできます -->
    <スロット>
      <div class="formatting">
        {{ 文章 }}
      </div>
    </スロット>
  </ボタン>
</テンプレート>

このコンポーネントをさまざまな方法で使用できるようになりました。

シンプルなデフォルト メソッドまたは独自のカスタム メソッド:

<!-- コンポーネントのデフォルト機能を使用する -->
<ButtonWithExtensionPoint text="書式設定されたテキスト" />

<!-- 拡張ポイントを使用してカスタム動作を作成する -->
<拡張ポイント付きボタン>
  <div class="異なるフォーマット">
    ここで何か違うことをする</div>
</ButtonWithExtensionPoint>

3. ネストされた値を確認するには引用符を使用する

ご存知ないかもしれませんが、引用符を使用するだけで、ネストされた値を簡単に直接確認できます。

時計 {
  '$route.query.id'() {
    // ...
  }
}

これは、深くネストされたオブジェクトを処理する場合に非常に便利です。

4. v-if を使うべきとき(そして避けるべきとき)を知る

場合によっては、 v-ifの代わりにv-show會

<ComplicatedChart v-show="chartEnabled" />

v-ifオンとオフを切り替えると、要素が完全に作成および破棄されます。 v-show要素を作成してそこに残し、スタイルをdisplay: noneに設定して非表示にする点で異なります。

切り替える必要があるコンポーネントのレンダリングにコストがかかる場合は、これがより効率的である可能性があります。一方、そのコンポーネントをすぐに使用する必要がない場合は、v-if を使用してレンダリングをスキップし、ページをより速く読み込みます。

5. 単一スコープ スロットの省略形 (テンプレート タグは不要です)

Scoped slotより興味深いものですが、それらを使用するには、多くのtemplateタグも使用する必要があります。

これを回避するショートカットがありますが、単一のスコープslotを使用する場合に限られます。

次のように書く代わりに:

<データテーブル>
  <テンプレート #header="テーブル属性">
    <TableHeader v-bind="tableAttributes" />
  </テンプレート>
</データテーブル>

次のように書くことができます:

<データテーブル #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</データテーブル>

これはより単純で直接的です。

6. 条件付きでスロットをレンダリングする

すべてのVueコンポーネントには、すべてのslotを含む特別な$slotsオブジェクトがあります。 デフォルトslotにはデフォルト キーがあり、名前付きスロットにはその名前がキーとして使用されます。

定数$スロット = {
  デフォルト: <デフォルトスロット>,
  アイコン: <アイコンスロット>,
  ボタン: <ボタンスロット>,
};

ただし、この$slotsオブジェクトには、定義されたすべてのslotではなく、コンポーネントに適用されるslotのみが含まれます。

複数の名前付きスロットを含む複数のスロットを定義する次のコンポーネントを考えてみましょう。

<!-- スロット.vue -->
<テンプレート>
  <div>
    <h2>ここにいくつかのスロットがあります</h2>
    <スロット />
    <スロット名="秒" />
    <スロット名="3番目" />
  </div>
</テンプレート>

コンポーネントにスロットを 1 つだけ適用すると、そのスロットだけが $slots オブジェクトに表示されます。

<テンプレート>
  <スロット>
    <テンプレート #2>
      これは2番目のスロットに適用されます
    </テンプレート>
  </スロット>
</テンプレート>

$slots = { 2番目: <vnode> }

これをコンポーネントで使用して、どのslotコンポーネントに適用されているかを検出できます。

たとえば、 slotのラッパー要素を非表示にすると、次のようになります: \

<テンプレート>
  <div>
    <h2>パッケージスロット</h2>
    <div v-if="$slots.default" class="styles">
      <スロット />
    </div>
  </div>
</テンプレート>

これで、スタイルが適用されたdivラッパーは、実際にそのslotに何かが入力された場合にのみレンダリングされるようになります。

v-ifを使用しない場合、 slotがなければ空の不要なdivが作成されます。 div のスタイルによっては、レイアウトが乱れて見た目がおかしくなる可能性があります。

6.1 スロットを条件付きでレンダリングできるようにする必要があるのはなぜですか?

条件スロットを使用する主な理由は 3 つあります。

  • wrapper divを使用してデフォルトのスタイルを追加する場合
  • slotは空です
  • デフォルトのコンテンツとネストされたslotを組み合わせると

たとえば、デフォルトのスタイルを追加するときは、 slotの周囲に div を追加します。

<テンプレート>
  <div>
    <h2>これはかなり素晴らしいコンポーネントですよね?</h2>
    <div class="default-styling">
      <スロット>
    </div>
    <button @click="$emit('click')">クリックしてください!</button>
  </div>
</テンプレート>

ただし、親コンポーネントがそのスロットにコンテンツを適用しない場合は、ページに空の div がレンダリングされることになります。

<div>
  <h2>これは本当にクールなコンポーネントです</h2>
  <div class="default-styling">
    <!-- スロットにはコンテンツはありませんが、この div はレンダリングされます -->
  </div>
  <button @click="$emit('click')">クリックしてください!</button>
</div>

ラッピング div に v-if を追加すれば問題は解決するはずです。スロットにコンテンツが適用されていませんか?このような:\

<div>
  <h2>これは本当にクールなコンポーネントです</h2>
  <button @click="$emit('click')">クリックしてください!</button>
</div>

7. スロットの変更を観察する方法

スロットの内容がいつ変更されたかを知る必要がある場合があります。

<!-- 残念ながらこのイベントは存在しません-->
<スロット @change="更新" />

残念ながら、Vue にはこれを検出する組み込みの方法はありませんが、ミューテーション オブザーバーを使用してこれを実行する非常に優れた方法があります。

エクスポートデフォルト{
  マウント() {
    // 変更があったら `update` を呼び出す
    const オブザーバー = 新しい MutationObserver(this.update);

    //このコンポーネントの変更を監視する observer.observe(this.$el, {
      子リスト: true、
      サブツリー: true
    });
  }
};

8. ローカルスタイルとグローバルスタイルの融合

多くの場合、スタイルを使用する場合は、そのスコープを単一のコンポーネントに限定する必要があります。

<スタイルスコープ>
  。成分 {
    背景: 緑;
  }
</スタイル>

必要に応じて、スコープ指定のないスタイル ブロックを追加してグローバル スタイルを追加することもできます。

<スタイル>
  /*グローバルアプリケーション*/
  .コンポーネントp{
    下部マージン: 16px;
  }
</スタイル>

<スタイルスコープ>
  /*この特定のコンポーネントにスコープ設定*/
  。成分 {
    背景: 緑;
  }
</スタイル>

9. 子コンポーネントのスタイルをオーバーライドする - 正しい方法

Scoped CSS整理整頓しやすく、スタイルが誤ってアプリケーションの他の部分に漏れるのを防ぎます。しかし、場合によっては、子コンポーネントのスタイルをオーバーライドして、そのスコープから抜け出す必要があります。

Vue には、この目的専用のディープ セレクターがあります。

<スタイルスコープ>
/* スタイルのスコープを維持しながら子コンポーネントの CSS をオーバーライドします */
.my-component >>> .child-component {
  フォントサイズ: 24px;
}
</スタイル>

注: SCSS などの CSS プリプロセッサを使用している場合は、代わりに /deep/ を使用することをお勧めします。

10. コンテキスト認識コンポーネントで魔法を生み出す

コンテキスト認識コンポーネントは「魔法」です。周囲で起こっていることに自動的に適応し、エッジケースを処理し、状態を共有するなど、さまざまな機能を備えています。コンテキスト認識コンポーネントには主に 3 つの種類がありますが、その中でも構成が最も興味深いと思います。

10.1 状態の共有

大きなコンポーネントを複数の小さなコンポーネントに分割する場合でも、多くの場合、それらのコンポーネント間で状態を共有する必要があります。この作業をコンポーネントを使用するユーザーに押し付けるのではなく、「舞台裏で」行うことができます。

Dropdownコンポーネントは、 SelectOptionコンポーネントに分解して、柔軟性を高めることができます。ただし、使いやすくするために、Select コンポーネントと Option コンポーネントはselected状態を相互に共有します。

<!-- 簡潔にするために単一のコンポーネントとして使用します -->
<ドロップダウン v-model="選択済み" :options="[]" />

<!-- 柔軟性を高めるために分割 -->
<v-model="selected"> を選択
  <Option value="mustard">マスタード</Option>
  <Option value="ketchup">ケチャップ</Option>
  <div class="relish-wrapper">
    <Option value="relish">レリッシュ</Option>
  </div>
</選択>

10.2 構成

場合によっては、アプリケーションの残りの部分の状況に基づいてコンポーネントの動作を変更する必要があることがあります。これは通常、問題が発生する可能性のあるエッジケースを自動的に処理するために行われます。ポップアップまたはTooltip 、ページから溢れないように位置を変更する必要があります。ただし、コンポーネントがモーダル内にある場合は、 modalからオーバーフローしないようにコンポーネントの位置を変更する必要があります。 Tooltipモーダル内にあることを認識していれば、これを自動的に実行できます。

10.3 モデリング

コンテキスト対応CSSを作成するときは、親要素または兄弟要素で何が起こっているかに基づいて異なるスタイルを適用します。

.統計 {
  色: 黒;
  フォントサイズ: 24px;
  フォントの太さ: 太字;
}

/* 隣り合う統計情報の間に間隔を空ける */
.統計 + .統計 {
  左マージン: 10px;
}

CSS の変数を使用すると、ページのさまざまな部分に異なる値を設定できるため、さらに一歩前進できます。

11. Vue の外部で作成された変数をレスポンシブにするにはどうすればよいですか?

Vue外部から変数を取得する場合、それをレスポンシブにできると便利です。こうすることで、計算されたプロパティ、ウォッチャー、その他の場所で使用でき、 Vueの他の状態と同じように機能します。

オプション API を使用する場合は、コンポーネントのデータ セクションに次のコードを追加するだけです。

const 外部変数 = getValue();

エクスポートデフォルト{
  データ() {
    戻る {
      反応変数: 外部変数、
    };
  }
};

Vue 3でコンポジションAPIを使用する場合は、次のようにrefまたはreactiveを使用できます。

'vue' から { ref } をインポートします。

// Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue();
const リアクティブ変数 = ref(外部変数);

// .value を使用してアクセスします console.log(reactiveVariable.value);

代わりにリアクティブを使用してください:

'vue' から { reactive } をインポートします。

// Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue();
// Reactive はオブジェクトと配列でのみ機能します const anotherReactiveVariable = reactive(externalVariable);

// 直接アクセス console.log(anotherReactiveVariable);

まだVue 2使用している場合 (多くの人がそうであるように)、 reactiveの代わりにobservableを使用してまったく同じ結果を得ることができます。

12. v-for での構造分解

v-forで構造化分解できることをご存知ですか?

<li
  v-for="{ ユーザー内の name, id }"
  :key="id"
>
  {{ 名前 }}
</li>

ご存知のとおり、次のようなタプルを使用して v-for からインデックスを取得できます。

<li v-for="(値, キー) in [
  「海勇」
  '凍った'、
  「ウェブ初心者」
]">
  {{ インデックス + 1 }} - {{ 値 }}
</li>

オブジェクトを使用する場合、キーを取得することもできます。

<li v-for="(値, キー) in {
  名前:「海勇」
  公開: 2021年、
  監督:「ブロガー」
}">
  {{ キー }}: {{ 値 }}
</li>

これらの 2 つの方法を組み合わせて、プロパティのキーとインデックスの両方を取得することもできます。

<li v-for="(値、キー、インデックス) in {
  名前:「海勇」
  公開: 2021年、
  監督:「ブロガー」
}">
  #{{ インデックス + 1 }}。{{ キー }}: {{ 値 }}
</li>

13. Vue で範囲をループする

v-for ディレクティブを使用すると、配列を反復処理できますが、範囲を反復処理することもできます。

<テンプレート>
  <ul>
    <li v-for="n in 5">アイテム #{{ n }}</li>
  </ul>
</テンプレート>


表示効果:

プロジェクト#1
プロジェクト #2
プロジェクト #3
プロジェクト #4
プロジェクト #5

v-for range を使用すると、範囲は 1 から始まり、指定した数値で終了します。

14. コンポーネント内の何かを観察する

コンポーネントからの応答はすべて観察できます。

エクスポートデフォルト{
  計算: {
    いくつかの計算されたプロパティ() {
      // 計算プロパティを更新},
  },
  時計:
    いくつかの計算されたプロパティ() {
      // 計算されたプロパティが更新されたときに何かを行う }
  }
};

視聴できるもの:

  • 計算の小道具
  • 小道具
  • ネストされた値

コンポジション API を使用する場合、 refまたはreactiveオブジェクトであれば任意の値を監視できます。

15. アイテム盗難タイプ

親コンポーネントで使用するために、子コンポーネントからpropタイプをコピーします。しかし、これらの小道具の種類を盗むことは、単にコピーするよりもはるかに優れています。

たとえば、このコンポーネントでは Icon コンポーネントを使用します。

<テンプレート>
  <div>
    <h2>{{ 見出し }}</h2>
    <アイコン
      :type="アイコンタイプ"
      :size="アイコンサイズ"
      :colour="アイコンの色"
    />
  </div>
</テンプレート>

これを機能させるには、Icon コンポーネントからコピーした正しいプロパティ タイプを追加する必要があります。

'./Icon' から Icon をインポートします。
エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    アイコンタイプ: {
      タイプ: 文字列、
      必須: true、
    },
    アイコンサイズ: {
      タイプ: 文字列、
      デフォルト: '中'、
      バリデータ: サイズ => [
        '小さい'、
        '中くらい'、
        '大きい'、
        「特大」
      ].includes(サイズ)、
    },
    アイコンカラー:
      タイプ: 文字列、
      デフォルト: '黒'、
    },
    見出し:
      タイプ: 文字列、
      必須: true、
    },
  },
};

Iconコンポーネントのpropタイプが更新されると、このコンポーネントに戻って更新することを忘れてしまうことは間違いありません。時間が経つにつれて、このコンポーネントのpropタイプがIconコンポーネントのpropタイプから逸脱し始めると、バグが発生します。

だから私たちはそれらを盗むのです:

'./Icon' から Icon をインポートします。
エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    ...アイコン.props、
    見出し:
      タイプ: 文字列、
      必須: true、
    },
  },
};

ただし、この例では各プロパティ名の先頭に“icon”を追加したので、これを実現するには少し余分な作業を行う必要があります。

'./Icon' から Icon をインポートします。

アイコンプロパティを定数に設定する

// 事前に何らかの処理を行う
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    ...アイコンプロップ、
    見出し:
      タイプ: 文字列、
      必須: true、
    },
  },
};

これで、 Iconコンポーネントのpropタイプが変更されても、コンポーネントは最新の状態に保たれます。

しかし、 Iconコンポーネントにpropタイプが追加または削除された場合はどうなるでしょうか?これらのケースをカバーするには、 v-bind計算プロパティを使用して動的な状態を維持します。

16. 要素の外側(または内側)のクリックを検出する

場合によっては、クリックが特定の要素の内側で発生したか外側で発生したかを検出する必要があることがあります。私たちが通常使用するアプローチは次のとおりです。

window.addEventListener('mousedown', e => {
  // クリックされた要素を取得します。const clickedEl = e.target;

  // `el` は外部クリックを検出する要素です if (el.contains(clickedEl)) {
    // "el" 内をクリック } else {
    // `el` の外側をクリック}
});

17. 再帰スロット

テンプレートのみを使用してコンポーネントv-forできますか?その過程で、 slotを再帰的に使用する方法を発見しました。

コンポーネントは次のようになります。

<!-- VFor.vue -->
<テンプレート>
    <div>
        <!-- 最初の項目をレンダリングします-->
    {{リスト[0]}}
        <!-- 他にも処理すべき項目があるが、レンダリングした項目はそのままにしておく必要がある場合 -->
    <v-for
      v-if="リストの長さ > 1"
            :list="リスト.スライス(1)"
        />
    </div>
</テンプレート>

スコープ付きスロットでこれを実行したい場合、なぜ実行しないのでしょうか? ! — 少し調整が必要です: <

テンプレート>
  <div>
    <!-- レンダリングするアイテムをスロットに渡します -->
    <スロット v-bind:item="リスト[0]">
      <!-- デフォルト -->
      {{リスト[0]}}
    </スロット>

    <v-for
      v-if="リストの長さ > 1"
      :list="リスト.スライス(1)"
    >
      <!-- スコープ スロットを再帰的に渡します -->
      <テンプレート v-slot="{ アイテム }">
        <スロット v-bind:item="item" />
      </テンプレート>
    </v-for>
  </div>
</テンプレート>

このコンポーネントの使用方法は次のとおりです。

<テンプレート>
  <div>
    <!-- 一般的なリスト -->
    <v-for :list="リスト" />

    <!-- 太字項目のリスト -->
    <v-for :list="リスト">
      <テンプレート v-slot="{ アイテム }">
        <strong>{{ アイテム }}</strong>
      </テンプレート>
    </v-for>
  </div>
</テンプレート>

18. コンポーネントメタデータ

コンポーネントに追加するすべての情報が状態であるとは限りません。他のコンポーネントにさらに情報を提供するために、メタデータを追加する必要がある場合があります。

たとえば、 Google Analytics のような分析ダッシュボード用にさまざまなウィジェットを構築する場合、次のようになります。

レイアウトで各ウィジェットが占める列数を把握したい場合は、コンポーネントにメタデータとして直接追加できます。

エクスポートデフォルト{
  名前: 'LiveUsersWidget',
  // 👇 追加プロパティとして追加するだけです columns: 3,
  小道具: {
    // ...
  },
  データ() {
    戻る {
      //...
    };
  },
};

このメタデータはコンポーネントのプロパティとして見つかります。

'./LiveUsersWidget.vue' から LiveUsersWidget をインポートします。
const { columns } = LiveUsersWidget;

特別な $options プロパティを介してコンポーネント内からメタデータにアクセスすることもできます。

エクスポートデフォルト{
  名前: 'LiveUsersWidget',
  列: 3,
  作成された() {
    // 👇 `$options` にはコンポーネントのすべてのメタデータが含まれます console.log(`Using ${this.$options.metadata} columns`);
  },
};

このメタデータはコンポーネントのすべてのインスタンスに対して同じであり、応答性がないことに注意してください。

その他の用途には以下が含まれます (ただし、これらに限定されません)。

  • 各コンポーネントのバージョン番号を保持する
  • ビルドツールがコンポーネントを異なる方法で処理するためのカスタムフラグ
  • 計算されたプロパティ、データ、ウォッチャーなどを超えて、コンポーネントにカスタム機能を追加します。

19. 複数ファイル単一ファイルコンポーネント

これは SFC のあまり知られていない機能です。通常の HTML ファイルと同じようにファイルをインポートできます。

<!-- "単一" ファイル コンポーネント -->
<テンプレート src="./template.html"></テンプレート>
<script src="./script.js"></script>
<スタイル スコープ src="./styles.css"></style>

これは、スタイル、ドキュメント、その他を共有する必要がある場合に便利です。スクロールで指が疲れてしまうような非常に長いコンポーネントファイルにも最適です。

20. 再利用可能なコンポーネントはあなたが思っているものとは違う

再利用可能なコンポーネントは、大きくて複雑なものである必要はありません。私は、小さくて短いコンポーネントを再利用可能なものにすることがよくあります。このコードをどこでも書き直すわけではないので、更新が非常に簡単になり、すべてのOverflowMenuがまったく同じに見えて機能することを確認できます。なぜなら、それらは同じだからです。

<!-- オーバーフローメニュー.vue -->
<テンプレート>
  <メニュー>
    <!-- メニューをトリガーするカスタム ボタンを追加します -->
    <テンプレート #button v-slot="bind">
      <!-- クリック ハンドラー、a11y 属性などを渡したい場合は、bind を使用します。 -->
      <ボタン v-bind="bind">
        <!-- 独自の「...」アイコンを使用します。このボタンにはテキストはありません -->
        <テンプレート #アイコン>
          <svg src="./ellipsis.svg" />
        </テンプレート>
      </ボタン>
    </テンプレート>
  </メニュー>
</テンプレート>

ここではMenuコンポーネントを使用しましたが、メニューを開くためのトリガーとなるボタンに「…」(省略記号) アイコンを追加しました。ほんの数行なので、再利用可能なコンポーネントを作成する価値はおそらくないでしょう。このようなメニューを使用するたびにアイコンを追加するだけではだめでしょうか?しかし、このOverflowMenu何十回も使用されるため、アイコンやその動作を更新したい場合は簡単に行うことができます。使い方もとても簡単です!

<テンプレート>
  <オーバーフローメニュー
    :menu-items="項目"
    @click="ハンドルメニュークリック"
  />
</テンプレート>

21. コンポーネント外からのメソッドの呼び出し

ref を指定することで、コンポーネントの外部からメソッドを呼び出すことができます。

<!-- 親.vue -->
<テンプレート>
  <子コンポーネント ref="子" />
</テンプレート>

 
// Parent.vue のどこか this.$refs.child.method();

通常、コンポーネント間の通信には、プロパティとイベントを使用します。プロパティは子コンポーネントに送信され、イベントは親コンポーネントに送り返されます。

<テンプレート>
  <子コンポーネント
    :tell-me-what-to-do="いくつかの指示"
    @something-happened="hereIWillHelpYouWithThat"
  />
</テンプレート>

しかし、親コンポーネントが子コンポーネントのメソッドをトリガーする必要がある状況に遭遇することがあります。ここでは、単に小道具を渡すだけでは機能しません。

ブール値を渡して、子コンポーネントにそれを監視させることができます。

<!-- 親.vue -->
<テンプレート>
  <ChildComponent :trigger="メソッドを呼び出すべき" />
</テンプレート>

// 子.vue
エクスポートデフォルト{
  プロパティ: ['トリガー'],
  時計:
    shouldCallMethod(newVal) {
      if (newVal) {
        // このメソッドはトリガーが `true` に設定されている場合に呼び出されます this.method();
      }
    }
  }
}

これは正常に動作しますが、最初の呼び出しのみです。このアクションを複数回トリガーする必要がある場合は、状態をクリーンアップしてリセットする必要があります。ロジックは次のようになります。

  • Parentコンポーネントはtriggerproptrueを渡します
  • Watchがトリガーされ、 Childコンポーネントがメソッドを呼び出す
  • Childコンポーネントは、メソッドが正常にトリガーされたことをParentコンポーネントに通知するイベントを発行します。
  • Parentコンポーネントはtriggerfalseにリセットするので、これを再度実行できます。

代わりに、子コンポーネントに ref を設定すると、メソッドを直接呼び出すことができます。

<!-- 親.vue -->
<テンプレート>
  <子コンポーネント ref="子" />
</テンプレート>

// Parent.vue のどこか this.$refs.child.method();

私たちは「 props down, events up 」というルールを破り、カプセル化を破壊していますが、それはより明確で、理解しやすく、そして価値があります。

時には「最善」の解決策が最悪の解決策になってしまうこともあります。

22. 配列とオブジェクトの監視

オブザーバーを使用する上で最も難しいのは、オブザーバーが正しく機能しないことがある点です。これは通常、 deeptrueに設定せずに配列またはオブジェクトの内部を参照しようとしているために発生します。

エクスポートデフォルト{
  名前: 'ColourChange',
  小道具: {
    色:
      タイプ: 配列、
      必須: true、
    },
  },
  時計:
    // メソッドの代わりにオブジェクト構文を使用する colours: {
      // これにより、Vue は配列の内側を見るよう通知されます deep: true,

      // メソッドをハンドラーフィールド handler() に移動する必要があります
        console.log('カラーリストが変更されました!');
      }
    }
  }
}

Vue 3 のリアクティブ API を使用すると次のようになります

時計(
  色、
  () => {
    console.log('カラーリストが変更されました!');
  },
  {
    深い:本当、
  }
);

さらに詳しく知りたい場合は、Vue 3 および Vue 2 のドキュメントを参照してください。

23. Vue Routerによるディープリンク

URL に (何らかの) 状態を保存して、ページ上の特定の状態に直接ジャンプすることができます。

たとえば、日付範囲フィルターを選択したページを読み込むことができます。

someurl.com/edit?date-range=last-week

これは、ユーザーが多数のリンクを共有する可能性のあるアプリケーションの部分、サーバーでレンダリングされるアプリケーション、または通常のリンクで通常提供されるよりも多くの情報を 2 つの別々のアプリケーション間で渡す場合に役立ちます。

フィルター、検索値、モードのオン/オフ、リスト内でスクロールした位置などを保存できます。無限ページングに最適です。

vue-router を使用して次のようにクエリを取得します (これは Nuxt や Vuepress などのほとんどの Vue フレームワークでも機能します)。

定数 dateRange = this.$route.query.dateRange;

これを変更するには、RouterLink コンポーネントを使用してクエリを更新します。

<ルーターリンク:to="{
  クエリ: {
    日付範囲: 新しい日付範囲
  }
}">

24. テンプレートタグの別の使い方

templateタグは、コードをより適切に整理するためにテンプレート内の任意の場所で使用できます。

私は v-if ロジックを簡素化するためにこれを使用するのが好きですが、時には v-for も使用します。

この例では、すべて同じ v-if 条件を使用する要素がいくつかあります。

<テンプレート>
  <div class="カード">
    <img src="画像パス" />
    <h3>
      {{ タイトル }}
    </h3>
    <h4 v-if="展開">
      {{ サブ見出し }}
    </h4>
    <div v-if="expanded" class="card-content">
      <スロット/>
    </div>
    <ソーシャルシェア v-if="expanded" />
  </div>
</テンプレート>

最初は少し扱いに​​くく、わかりにくいですが、これらの要素の多くは一緒に表示され、非表示になります。より大規模で複雑なアセンブリでは、状況はさらに悪化する可能性があります。

しかし、これを修正することは可能です。

テンプレート タグを使用してこれらの要素をグループ化し、v-if をテンプレート タグ自体に組み込むことができます。

<テンプレート>
  <div class="カード">
    <img src="画像パス" />
    <h3>
      {{ タイトル }}
    </h3>
    <テンプレートv-if="展開">
      <h4>
        {{ サブ見出し }}
      </h4>
      <div class="カードコンテンツ">
        <スロット/>
      </div>
      <ソーシャルシェア/>
    </テンプレート>
  </div>
</テンプレート>

25. エラー(および警告)を処理するためのより良い方法

Vue では、エラーと警告のカスタム ハンドラーを提供できます。

// ビュー3
const app = createApp(App);
app.config.errorHandler = (エラー) => {
  警告(エラー);
};

// ビュー2
Vue.config.errorHandler = (err) => {
  警告(エラー);
};

BugsnagRollbarなどのエラー追跡サービスはこれらのハンドラーにフックしてエラーを記録しますが、これらを使用してエラーをより適切に処理し、ユーザー エクスペリエンスを向上させることもできます。

たとえば、エラーが処理されない場合、アプリケーションはクラッシュするだけでなく、全ページにわたるエラー画面を表示して、ユーザーに更新または別のアクションを試行させる可能性があります。

Vue 3 では、エラー ハンドラーはテンプレート エラーとウォッチャー エラーにのみ適用されますが、Vue 2 のエラー ハンドラーはほぼすべてをキャッチします。どちらのバージョンの警告ハンドラも開発専用です。

これで、知っておくべき 25 の Vue のヒントに関するこの記事は終了です。さらに関連性の高い Vue のヒントについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueプロジェクトでlessを使用するためのヒント
  • 22 Vue 最適化のヒント (プロジェクトの実践)
  • Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)
  • Vueプロジェクトでよく使われる実践的なスキルのまとめ
  • Vue Router の 10 の高度なヒントのまとめ
  • 読めばわかるVueの8つのヒント
  • Vue 要素と Nuxt の使用に関するヒントを共有する
  • Vue 開発における一般的なルーチンとテクニックの概要
  • Vue関数コンポーネントの使用に関する簡単な説明
  • Vue.js でより良い v-for ループを書くための 6 つのヒント

<<:  クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

>>:  HTMLメタの大きな役割

推薦する

フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...

SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...

Nginx を使用して rtmp ライブ サーバーを実行する方法

今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...

Docker nginxは1つのホストを実装して複数のサイトを展開します

とあるサイトからレンタルした仮想マシンの有効期限が近づいており、更新料が200元以上かかります。Al...

Vue Element フロントエンドアプリケーション開発 テーブルリスト表示

1. リストクエリインターフェースの効果コード処理ロジックを紹介する前に、まずは感覚的に理解し、レン...

HTML の順序なしリストタグと順序付きリストタグの使用例

1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...

MySQL における KEY、PRIMARY KEY、UNIQUE KEY、INDEX の違い

タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...

ウェブフロントエンドエンジニアにおすすめのヒント

まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...

MySQL データベースでよく使用される SQL ステートメントの詳細と概要

この記事では、MySQL データベースでよく使用される SQL ステートメントを例を使用して説明しま...

仮想マシンの複製に関するVirtual Boxチュートリアル図

VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...

Vueライフサイクルの違いの詳細な説明

ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...

Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要

目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...

MySQL における between の境界と範囲の説明

境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...

VMware12.0 インストール Ubuntu14.04 LTS チュートリアル

私は、デスクトップ バージョンとサーバー バージョンの両方で、仮想マシンにさまざまなイメージを何度も...

DockerにRocketMQをインストールするための実装手順

目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...