[編集と共有] Vue で頻繁に聞かれる面接の質問の一部

今回は、基本的な知識を整理し、Vue の知識の蓄えを強化するために、Vue に関する面接でよくある質問をいくつか紹介します。収集する価値はありますので、ぜひ見てください。

# 私が共有するのは、Vue の面接でよくある質問の一部ですが、すべてを表しているわけではありません。記事に何か問題がある場合は、ご指摘ください。疑問がある場合や、面接に関するその他の質問がある場合は、コメント エリアにメッセージを残して共有することもできます。一緒に話し合いましょう。ありがとうございます!

1. vue2.0 コンポーネントの通信方法は何ですか?

• 親子コンポーネント通信: props および event、v- モデル、.sync、ref、$parentおよび $子供たち。 (学習ビデオ共有: vue ビデオ チュートリアル)

• 親子コンポーネント以外の通信: $attr および $listeners、 provide と inject、eventbus、ルート インスタンス $root、vuex、dispatch# を介したアクセス＃＃ そして brodcast

2. v-model はどのように双方向バインディングを実装しますか?

• vue 2.0

  v-model は、フォーム コントロールまたはコンポーネントに双方向バインディングを作成するために使用されます。 本質は、v-bind と v-on の糖衣構文です。 v-model がコンポーネントで使用されている場合、value という名前のコンポーネントがデフォルトでコンポーネントにバインドされます。 prop と input という名前のイベント。

• Vue3.0 3.x では、カスタム コンポーネントの

  v-model は modelValue を渡すことと同じです。 prop を実行し、スローされた update:modelValue event

3 を受け取ります。Vuex と単純なグローバル オブジェクトの違いは何ですか?

Vuex とグローバル オブジェクトの間には 2 つの主な違いがあります:

• Vuex の状態ストレージは応答性があります。 Vue コンポーネントがストアから状態を読み取るとき、ストアが のステータス 化すると、対応するコンポーネントがそれに応じて効率的に更新されます。

• #ストア内の状態を直接変更することはできません。ストア内の状態を変更する唯一の方法は、明示的にコミットすることです (コミット)突然変異。これにより、各状態の変化を簡単に追跡できるようになり、いくつかのタスクを実装できるようになります。 ツールは、アプリケーションをより深く理解するのに役立ちます。

4. Vue の親コンポーネントとサブコンポーネントのライフサイクル フックの実行順序は何ですか?

レンダリング プロセス: 親コンポーネントは、親コンポーネントとみなされる前に、すべての子コンポーネントがマウントされた後にのみマウントする必要があります。 マウントが完了したため、子コンポーネントがマウントされた後に親コンポーネントがマウントされます。

beforeCreate ->parentcreated ->beforeMount ->childbeforeCreate ->gt; サブ作成 -> subbeforeMount -> サブマウント -> 親マウント

サブコンポーネント更新プロセス:

親コンポーネントに影響: ⼗beforeUpdate -> SubbeforeUpdate-> ;⼼updated - > ◆ updated
1. # は親コンポーネントには影響しません: subbeforeUpdate -> subupdated

# 親コンポーネントの更新プロセス:

サブコンポーネントに影響します: ⼗更新前 -> ⼖更新前 -> ⼼更新済み -> ⼗ updated

1. サブコンポーネントには影響しません: ◆beforeUpdate -> ◗updated

破棄プロセス:

◗beforeDestroy -> ⼗beforeDestroy -> ⼖ destroy -> Parentdestroyed は見た目がたくさんあるので覚えるのが難しいですが、実際には、それを理解していれば、状況に関係なく、親コンポーネントがサブコンポーネントを待っている必要があります。完了します。 完了した後でのみ、対応する完了フックが実行されるため、覚えやすくなります

5. v-show と v-if の違いは何ですか?

• v-if

  は、切り替えプロセス中に 条件付きブロックのイベント リスナーとサブコンポーネントを破棄して再構築します。初期条件が false の場合、条件が初めて true になるまでは何も行われません。 染色モジュール。

v-show
• 初期条件に関係なく、

  css に基づいて切り替えるだけです すべてがレンダリングされます。

  したがって、
v-if

は切り替えにコストがかかり、

v-show はレンダリングの初期化にコストがかかります。 頻繁に切り替える必要がある場合、または切り替えられる DOM の部分が非常に複雑な場合は、v-show を使用するのが大きく、 の方が適しています。 適切な。レンダリング後に切り替えることがほとんどない場合は、v-if を使用する方が適切です。 6. Vue の v-html はどのような問題を引き起こしますか?

Web サイト上の任意の HTML の動的レンダリング、 は簡単に XSS を引き起こす可能性があります攻撃

。したがって、それは信頼できる範囲内でのみ可能です コンテンツには v-html を使用してください。ユーザーが送信したコンテンツには決して使用しないでください。

7. v-for におけるキーの役割は何ですか?

key は、各 vnode に割り当てられた一意の id です。 vnode diff プロセス中に、key を簡単に比較して、 それらが同じノードであるかどうか、および key の一意性を使用して map を生成し、より高速に取得できます。 対応するノードを取得します。

さらに key を指定すると、「インプレース再利用」戦略は使用されなくなり、レンダリングの精度を確保できます。 。

8. v-for と v-if を一緒に使用することが推奨されない理由

• v-for と v-if 同じノード内の場合、 v- for は v-if よりも優先度が高く、v-if が個別に繰り返されることを意味します すべての v-for ループで実行されます。走査される配列が非常に大きいが、表示される実際のデータが非常に小さい場合 多くのパフォーマンスの無駄が発生します。
• このシナリオでは、最初に computed を使用してデータをフィルター処理することをお勧めします。

9. vue-router ハッシュ モードとヒストリー モードの違いは何ですか?

#違い:

• #URL 表示では、ハッシュ モードには「#」が付きますが、ヒストリ モードには「#」が付きません。

• refresh ページを表示すると、ハッシュ モードはハッシュ値に対応するページに正常にロードされますが、履歴は残りません。 正しく処理されると、404 が返されます。通常、すべてのページをホームページ ルートにリダイレクトするようにバックエンドを構成する必要があります。

• 互換性。ハッシュは、下位バージョンのブラウザと IE

10 をサポートできます。vue-router ハッシュ モードと履歴モードはどのように実装されますか?

• ハッシュ モード:

# 後続のハッシュ値が変更されても、ブラウザはサーバーにリクエストを送信しません。リクエストを送信していない 要求された場合、ページは更新されません。同時に、ハッシュチェンジ イベントをリッスンすることで、ハッシュにどのような変更が発生したかを知ることができ、それに基づいて ハッシュ変更を使用して、ページ上のコンテンツの一部を更新する操作を実装します。

• 履歴モード:

履歴モードの実装は、主に HTML5 標準によってリリースされた 2 つの API、pushState と replaceState、これら 2 つの API は URL を変更できますが、リクエストは送信しません。こうすることで監視できるようになります URL の変更をリッスンして、ページ上のコンテンツの一部を更新します。

11. vue2.x と比較した vue3.0 の変更点は何ですか?

• 監視機構の変更(Object.defineProperty —>Proxy)
• テンプレート
• オブジェクトベースのコンポーネント宣言メソッド(クラス)
• Use ts
• その他の変更: カスタム レンダラーのサポート、Fragment (複数のルート ノード) および Protal ( dom (コンテンツのレンダリングと構築) コンポーネントの他の部分は、ツリーシェイク最適化に基づいて、より多くの組み込み関数を提供します

12. MVVM について話してもらえますか?

• MVVM は Model-View-ViewModel の略称、つまり MVC です。 Controller は ViewModel に進化します。
• モデル層はデータ モデルを表し、ビューは UI コンポーネントを表し、ViewModel はビュー層とモデル層の間のブリッジです。データは viewModel 層にバインドされ、データは自動的にレンダリングされます。ページが表示されます。ビューが変更されます。通知されます。 viewModel レイヤーはデータ を更新します。

13. vue のコンポーネント データが、オブジェクトを直接返すのではなく、オブジェクトを返す関数なのはなぜですか?

• データがオブジェクトとして定義されている場合、これは、すべてのコンポーネント インスタンスがデータ data のコピーを共有することを意味します。したがって、どのコンポーネント インスタンスが変更されても、データの場合は問題ありません。が欠落している場合は、すべてのコンポーネント インスタンスに影響します。
• コンポーネント内のデータは関数として記述されます。データは関数の戻り値の形式で定義されます。そのため、各複合体は コンポーネントが一度使用されると、データの新しいコピーが返されます。これは、コンポーネント インスタンスごとに プライベート データ スペース を作成するのと同様で、各コンポーネント インスタンスが独自のデータを維持できるようになります。オブジェクト形式で記述するだけで、すべてのコンポーネント インスタンスで共通になります。 データの一部を知っていれば、すべてを変える結果が得られます。

14. Vue での計算の実装方法

プロセスは次のように要約されます:

1.コンポーネントが初期化されると、computed と data がそれぞれ確立されます。 自己応答システム Observer は、data の各属性設定をスキャンします。 get/set データ インターセプト

2. 初期化 computed は initComputed 関数

• を呼び出します。 watcher インスタンスを登録し、内部で Dep メッセージをインスタンス化します。 情報サブスクライバーは、後続のコレクションの依存関係 (レンダリング関数の watcher や、 変更されました watcher )

• 計算されたプロパティが呼び出されると、その Object.defineProperty がトリガーされます get アクセサ関数

• watcher.depend() メソッドを独自のメッセージ サブスクライバに呼び出します dep 他のプロパティを watcher

の
• subs

  に追加します。 watcher ##evaluate# を呼び出します。 ## メソッド (呼び出すため) watcher の get メソッド) 自身を他の watcher のメッセージ サブスクライバーのサブスクライバーにするには、まず watcher を に割り当てます。 Dep.target 、その後 getter評価関数実行後、評価関数内のプロパティ(如来自己など)にアクセスする際 data 、 props またはその他の computed )、 get アクセサー関数も起動され、それによって計算されたプロパティの watcher が評価関数のプロパティの watcher のメッセージ サブスクライバー## に追加されます。 dep、これらの場合 操作が完了したら、最後に Dep.target を閉じて null に割り当て、 評価関数の結果を返します。

  3. 特定の属性が変更されると、
set

インターセプト関数がトリガーされ、独自のメッセージ サブスクライバーが呼び出されます。

dep の notify メソッドを何度も繰り返す すべてのサブスクライバ wathcer の subs 配列が現在の dep に保存され、1 つずつ保存されます。 watcher の update メソッドを呼び出します。 メソッドを使用して応答の更新を完了します。 15. Vue の応答原則

インタビューでこの質問をされ、その説明が不明瞭な場合は、Vue 公式ドキュメントから直接これを引用することができます。写真、写真を見てください 説明があったほうが良いでしょう。

Vue の応答性は、

Object.defineProperty

を通じて
• データ をハイジャックし、それを Observer パターンと組み合わせるというものです。 ＃＃＃実装。 Vue は Object.defineProperty を使用して
observe
• を作成します すべてのプロパティをハイジャックし、getter と setter に変換します。 Vue の各コンポーネント インスタンスは、コンポーネントのレンダリング中に使用される watcher インスタンスに対応します。 プロセス中に、使用された データ プロパティは、
getter
• を介して依存関係として収集されます。次に、依存関係の setter が起動すると、 いつ watcher に通知され、関連するコンポーネントが再レンダリングされます。 16. Object.defineProperty の欠点は何ですか?

Object.defineProperty

は
• オブジェクトのプロパティ

  のみをハイジャックできますが、Proxy は直接 プロキシ オブジェクト原因 Object.defineProperty ハイジャックできるのはプロパティのみであり、オブジェクトの各プロパティを走査する必要があります。そして プロキシはオブジェクトを直接プロキシできます。

  Object.defineProperty
新しいプロパティは手動で追加する必要があります
• Observe

  、Object.defineProperty はオブジェクトのプロパティをハイジャックするため、 したがって、属性を追加するときは、オブジェクトを再度スキャンして、新しい属性を追加する必要があります。 プロパティを追加し、Object.defineProperty を使用してハイジャックします。このような理由から、 Vue が data の配列またはオブジェクトに属性を追加するときは、vm.$set を使用する必要があります。 新しく追加された属性も応答することを確認してください。

  プロキシ
は、
• 13種類のインターセプト

  操作をサポートしています。 defineProperty にはありません。 新しい標準のパフォーマンス ボーナス プロキシ 新しい標準として、長期的には、JS エンジンは最適化され続けます。

  Proxy
ですが、
• getter

  と setter は基本的にターゲットにされなくなります 性的な最適化。

  プロキシ
互換性が低い 現在、
• プロキシ

  は完全にはサポートされていません。 インターセプト メソッドを使用した Polyfill ソリューション

  #17. Vue2.0 で配列の変更を検出するにはどうすればよいですか?

Vue の Observer は、配列に対して個別の処理を実行し、配列メソッドをコンパイルして、それを 配列属性の

__proto__

属性では、プロトタイプ チェーンメカニズムにより、対応する 私はその方法を探し続けるつもりはありません。コンパイル方法には、インデックスを増やすいくつかのメソッドが含まれます (push、 unshift、splice) を手動で観察します。 18. nextTick は何に使用され、その原理は何ですか?

この質問に明確に答えるための前提条件は、EventLoop プロセスを理解することです。

• 次の DOM 更新サイクルが終了した後に遅延コールバックを実行し、nextTick を使用してデータ変更直後にコールバックを取得します。 更新された DOM。
• nextTick マイクロタスクの実装では、まずサポートされているかどうかを確認します。 Promise、サポートされていない場合は、マクロタスクを直接指し、マクロタスクの実装が最初にチェックされます。 setImmediate (IE および Etage の上位バージョンでサポート) をサポートしているかどうかをテストします。サポートされていない場合は、サポートされているかどうかを確認します。 MessageChannel をサポートします。まだサポートされていない場合は、最終的に setTimeout 0;
• デフォルトでは、マイクロ タスクが実行できるため、最初にマイクロ タスク モードで実行されます。 1 ティックで完了します。 実装が完了し、再描画やアニメーションを伴う一部のシーンでパフォーマンスが向上しました。
• ただし、マイクロタスクは優先度が高いため、場合によってはイベントのバブリング処理中にトリガーされてしまい、 いくつかの問題が発生するため、場所によってはマクロタスク (v-on など) の使用を強制します。

Note: nextTick のコールバック関数を一度配列に入れる理由 nextTick でコールバック関数を直接実行するのではなく、同じティック内で複数の呼び出しを確実に実行できるようにするためです。 今回 nextTcik を実行すると、複数の非同期タスクは起動されませんが、これらの非同期タスクは 1 つの同時タスクに圧縮されます。 ステップタスクは次のティック内に実行されます。

19. Vue テンプレートのコンパイル原則

vue テンプレートのコンパイル プロセスは 3 つの段階に分かれています:

• ステップ 1: 分析

テンプレート文字列を解析して AST を生成します。生成される AST 要素ノードは合計 3 種類あり、1 つは通常の要素、2 は通常の要素です。 式 3 はプレーンテキストです。

• ステップ 2: 構文ツリーを最適化する

Vue テンプレート内のすべてのデータが応答するわけではなく、応答後に表示されないデータも多数あります。最初にレンダリングされ、変更され、その後 データのこの部分によって生成される DOM は変更されないため、パッチ プロセス中の比較を省略できます。

このステージでは、生成された AST ツリーを深く調べて、その各サブツリーが静的ノードであるかどうかを検出します。静的ノードの場合は、 生成される DOM を変更する必要はなく、実行時のテンプレートの更新が大幅に最適化されます。

1. コードを生成する

const code = generate(ast, options)

generate メソッドを使用して、ast からレンダリング関数を生成します。

20. Vue3.x レスポンシブ データの原理をご存知ですか?

Vue3.x は、Object.defineProperty の代わりに Proxy を使用します。プロキシは直接監視できるため、 オブジェクトと配列に変更があり、13 ものインターセプト メソッドが存在します。また、新しい標準として、ブラウザのメーカーによる継続的なパフォーマンスの最適化の対象となります。 変化。

Proxy はオブジェクトの最初のレイヤーのみをプロキシしますが、Vue3 はこの問題をどのように処理するのでしょうか?

Reflect.get の現在の戻り値が Object であるかどうかを確認します。オブジェクトである場合は、プロキシとして reactive メソッドを使用します。 このようにして、深い観察が実現されます。

配列を監視する場合、get/set が複数回トリガーされる可能性があります。複数のトリガーを防ぐにはどうすればよいでしょうか?

キーが現在のプロキシ オブジェクト ターゲット自体の属性であるか、古い値と新しい値が等しいかどうかを判断できます。 上記 2 つの条件のいずれかが満たされた場合にのみ、トリガーを実行できます。

21. Vue でどのようなパフォーマンスの最適化を行いましたか?

エンコーディング段階

• データ内のデータを削減してみてください。データ内のデータには、ゲッターとセッター、および対応するウォッチャーが追加されます。収集されます
• v-if と v-for は一緒に使用できません
#v-for を使用してイベントを各要素にバインドする必要がある場合は、イベント プロキシを使用してください
• SPA ページは keep -alive キャッシュ コンポーネントを使用します。
• 多くの場合、v-show の代わりに v-if を使用します。
• key を使用して一意性を確保します。
• ルーティング遅延読み込み、非同期を使用します。コンポーネント
• アンチシェイク、スロットリング
• オンデマンドでサードパーティモジュールをインポート
• 長いリストを表示領域までスクロールし、動的にロード
• Lazy画像の読み込み

SEO 最適化

##プリレンダリング

##サーバーサイド レンダリング SSR
• #パッケージの最適化

圧縮コード

ツリーシェイキング/スコープホイスティング

• cdnを使用してサードパーティモジュールをロードする
• マルチスレッド パッケージング happypack
• splitChunks によるパブリック ファイルの抽出
• ソースマップの最適化
• ユーザー エクスペリエンス

#スケルトン画面

PWA

• #キャッシュ (クライアント キャッシュ、サーバー キャッシュ) の最適化を使用したり、サーバーで gzip 圧縮を有効にしたりすることもできます。
• (学習ビデオ共有:
Web フロントエンド開発

、

基本プログラミング ビデオ

)

以上が[編集と共有] Vue で頻繁に聞かれる面接の質問の一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。