Vue で頻繁に聞かれる面接の質問 (回答付き)

1. Vue におけるキー値の役割

• 1. vue はレンダリング時に、まず新しい DOM と古い DOM を比較し、dom 構造が一貫している場合、vue は古い DOM を再利用します。(この時、データの描画が異常になる可能性があります)
• 2. キーを使用して一意の識別子を dom に追加し、vue に dom を強制的に更新させます

2. Vueコンポーネントのパス値

父から息子へ

• 1. サブコンポーネントの小道具で変数を定義する
• 2. 親コンポーネントが子コンポーネントを使用する場合、inline 属性を通じて props 変数に値を渡します。
• 特徴: 一方向のデータフロー

子传父

• 1. サブコンポーネント: $emit は親のイベントをトリガーします
• 2. 親は @custom イベント名 = 親のメソッドを使用するコンポーネントを使用しています (子が値を持ち出します)
• 機能: イベント監視

親子でないコンポーネント

• vuex EventBus (理解するだけ)

3. [必須] vue のライフサイクルは何段階に分かれていますか?

コア: 4 段階の 8 つのフック機能

Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。つまり、作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンロードなどの一連の処理をVueのライフサイクルと呼びます。

1* *）作成前**

インスタンスの初期化後、データ オブザーバーおよびイベント/ウォッチャーのイベント構成の前に呼び出されます。

2* *）作成**

インスタンスの作成直後に呼び出されます。このステップでは、インスタンスはデータ オブザーバー、属性とメソッドの操作、監視/イベント イベント コールバックの構成を完了しています。ただし、マウントフェーズはまだ開始されておらず、$el プロパティは現在表示されていません。

3* *）マウント前**

マウントが開始される前に呼び出されます。関連付けられたレンダリング関数が初めて呼び出されます。

4* *）搭載**

このフックは、el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後に呼び出されます。ルート インスタンスがドキュメント内要素をマウントする場合、mount が呼び出されたときに vm.$el もドキュメント内にあります。

5* *）更新前**

データが更新されるとき、仮想 DOM にパッチが適用される前に呼び出されます。これは、追加されたイベント リスナーを手動で削除するなど、更新前に既存の DOM にアクセスする場合に適しています。サーバー側では最初のレンダリングのみが行われるため、このフックはサーバー側のレンダリング中に呼び出されません。

6* *）更新**

このフックは、データ変更による仮想 DOM の再レンダリングとパッチの後に呼び出されます。

7* *）アクティブ化**

キープアライブ コンポーネントがアクティブなときに呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。

8* *）無効化**

キープアライブ コンポーネントが無効になったときに呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。

9* *）破壊前**

インスタンスが破棄される前に呼び出されます。このステップでは、インスタンスはまだ完全に利用可能です。このフックは、サーバー側のレンダリング中には呼び出されません。

10* *）破壊されました**

Vue インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンスが指すすべてのバインドが解除され、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。

11* *) errorCaptured (2.5.0 以降の新機能)**

子孫コンポーネントからエラーをキャッチしたときに呼び出されます。このフックは、エラー オブジェクト、エラーが発生したコンポーネント インスタンス、およびエラーの原因に関する情報を含む文字列の 3 つのパラメータを受け取ります。このフックは、エラーがさらに上方に伝播するのを防ぐために false を返すことができます。

4. [必須] ページが初めてロードされたときにどのフック関数がトリガーされますか?

• 4つのフック
  • 作成前、
  • 作成した、
  • マウント前、
  • これらのフック関数を実装しました

5. [必須] Vue のルーティング実装モード: ハッシュ モードとヒストリー モード

1. 異なるパスのハッシュには # があります
が、履歴には # はありません 。
2. 異なる動作モードの
ハッシュ: 現在のページのハッシュを変更します。追加のサーバー
構成は必要ありません。

• 1. ハッシュ モード: ブラウザでは、記号「#」、# および # 以降の文字はハッシュと呼ばれ、window.location.hash と読み込まれます。特徴: ハッシュは URL に含まれていますが、HTTP リクエストには含まれていません。ハッシュはブラウザのアクションをガイドするために使用され、サーバー側のセキュリティには役に立たず、ハッシュはページをリロードしません。
• 2. 履歴モード: 履歴は HTML5 の新機能を採用し、2 つの新しいメソッドを提供します: PushState()、replaceState() はブラウザ履歴スタックを変更し、popState イベントの状態変化をリッスンできます。

6. 【必須】ルーティング設定項目の共通属性と機能を教えてください

• ルーティング設定パラメータ:
  • パス : ジャンプパス
  • コンポーネント : パスの相対コンポーネント
  • 名前: 名前付きルート
  • Children: 子ルートの設定パラメータ (ルートのネスト)
  • 小道具:ルーティングのデカップリング
  • リダイレクト : リダイレクトルート

7. 【必須】vueで踏んだ落とし穴について教えてください

• 1 データ内のデータを操作して応答がないことを確認する
  • 理由: 配列には多数のメソッドがあり、配列を変更するもの (ポップ プッシュなど) と、配列を変更しないもの (スライス、フィルターなど) があります。
  • 解決策: これは Vue.set (オブジェクト、属性、値) によって実現でき、オブジェクトの新しく追加された属性は応答します。
• 2. created が dom を操作するとエラーが報告され、dom を取得できません このとき、instance vue インスタンスはマウントされていません
  • 解決策: Vue.nextTick (取得するコールバック関数)
• 3. あまりにも低レベルでない限り、その他は自由に使用できます (たとえば、単語が間違っている、コードの位置が間違っているなど、これらは低レベルの問題です。他のことについて話しても構いませんが、この 2 つについては話さないでください) )

【おまけ】VueのnextTickの原理は何ですか？

• 1 nextTickが必要な理由
  • Vue は DOM を非同期的に変更し、開発者が DOM に直接触れることを推奨しませんが、場合によってはビジネスがデータ変更に対処する必要がある場合、それに応じて DOM が更新される場合は、Vue.nextTick(callback) API を使用できます。
• 2. 知識の蓄え（言えないけど事故を防ぐために知っておくべき）
  • イベントループにおけるマクロタスクとマイクロタスクの2つの概念
  • 一般的なマクロ タスクには、script、setTimeout、setInterval、setImmediate (より頻繁に実行されるタイマー) が含まれます。
  • 一般的なマイクロタスクは、Promise.then()、async です。
• 3. 最終的な答え:
  • nextTick の原理は次のとおりです。vue 通过异步队列控制 DOM 更新
  • nextTick底层是promise，所以是微任务。这个一定要知道
  • (公式言語) : nextTick コールバック関数が連続して実行される方法。この部分のソースコードを読むと、互換性の緩やかな低下の問題がまだ残っているため、多くの isNative() 判定が行われていることがわかります。Vue開発チームのパフォーマンスに対する熟慮と努力が見て取れます。
• 4. 小さな科学の普及: 実は、vue のバージョンが更新されたとき。nextTick はマクロ タスクとしてパッケージ化される場合もあれば、マイクロ タスクとしてパッケージ化される場合もあります。ただし、現在最新バージョンのvue2 、nextTick底层是微任务
  • 課外読書 nextTick ソースコード: https://juejin.cn/post/6875492931726376974

【ボーナスポイント】vスロットスロットとスコープスロット

• 1. スロット機能: 親コンポーネントがhtml结构子コンポーネントに渡されます。
• 2. 名前付きスロットの役割: 親コンポーネントが多个html结构子コンポーネントに渡されます。
• 3.スコープスロット機能：親コンポーネントが子コンポーネントにスロットを渡すと、子コンポーネント内のデータが利用可能になります

【おまけ】vueルーティングの機能と原理

• ルーティングの役割: 単一ページのアプリケーションを実現するため
• 原則: 場所のハッシュ値を監視する

[おまけポイント] 命令のカスタマイズ方法は何ですか? どのようなフック関数がありますか? その他のフック関数パラメータは何ですか?

• グローバル定義ディレクティブ: vue オブジェクトのディレクティブ メソッドには 2 つのパラメーターがあり、1 つはディレクティブ名、もう 1 つは関数です。コンポーネントでディレクティブを定義する: ディレクティブ
• フック関数:bind (バインディング イベントによってトリガーされる)、inserted (ノードの挿入時にトリガーされる)、update (コンポーネント内の関連する更新)
• フック関数パラメータ: el、バインディング