20 以上の知っておくべき Vue 面接の質問 (回答分析付き)

この記事では、Vue の面接での 20 の質問とその回答の分析をまとめました。一定の参考値があるので、困っている友達が参考になれば幸いです。

[推奨される関連する面接の質問: vue の面接の質問 (2021)]

レンズ 黄色と黒のチェック柄のシャツを見たとき、私の前に座っている面接官は悪意を持って来たに違いないと気づきました。

いつものように、3 分間かけて自己紹介をさせていただきます。この間、恥ずかしさを避けるために私は面接官の眉間を見つめていましたが、面接官は明らかに私の経験にあまり興味がありませんでした。彼は1分半の時点で私の話を中断した。

自分が最も得意としているテクノロジースタックは何だと思いますか?

Vue、Youda がとても好きです。Vue の最初のドキュメンタリーが最近公開されたばかりです。見るのはとてもいいです。

0.MVVM について話していただけますか?

---

MVVM は Model-View-ViewModel の略称で、MVC の Controller を次のように進化させたものです。 ViewModel。モデル レイヤーはデータ モデルを表し、ビューは UI コンポーネントを表し、ViewModel はビュー レイヤーとモデル レイヤー間のブリッジです。データは viewModel レイヤーにバインドされ、自動的にデータをページにレンダリングします。ビューが変更されると、 、データを更新するように viewModel レイヤーに通知されます。 (学習ビデオ共有: vue ビデオ チュートリアル)

1. Vue2.x レスポンシブ データの原理について簡単に説明します

---

Vueデータを初期化するとき、Object.defineProperty を使用して、データ内のすべてのプロパティを再定義します。ページが対応するプロパティを使用するとき、依存関係の収集が最初に実行されます (##watcher を収集します)。現在のコンポーネント)プロパティが変更された場合、関連する依存関係に更新操作 (パブリッシュおよびサブスクライブ) が通知されます。

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

---

(幸いなことに、私はそれを読みました。これは私にとって問題ではありません)

Vue3.x は、代わりに

Proxy を使用します。 Object.defineProperty 。なぜなら、Proxy はオブジェクトや配列の変更を直接監視でき、13 ものインターセプト メソッドを備えているからです。また、新しい標準として、ブラウザのメーカーによる継続的なパフォーマンスの最適化の対象となります。

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

(非常に簡単)

Reflect.get の現在の戻り値が Object であるかどうかを確認します。そうであれば、

reactive メソッドを使用してプロキシとして機能します。 こうして深い観察を実現しました。

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

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

面接官は顔を上げた。

#(この人は大丈夫、前の 2 人よりも優れている、多かれ少なかれ Vue3 のソース コードを読んでいるはずだ)

3. vue2 について話しましょう。 .x をもう一度 配列の変更を監視する方法

---

関数ハイジャックを使用して配列メソッドを書き換えます。Vue はデータ内の配列のプロトタイプ チェーンを書き換え、それ自体で定義された配列プロトタイプを指します。メソッド。このようにして、配列 API が呼び出されたときに依存関係の更新を通知できます。配列に参照型が含まれている場合、配列内の参照型は監視のために再度再帰的に走査されます。これにより、アレイの変更を監視できるようになります。

(この質問をできるインタビュアーは深さにより注意を払い、これらの日常的な操作を覚えておく必要があります)

(プロトタイプ チェーンの詳細については、次を参照してください)私の他の記事 コラム)

この記事は、JavaScript プロトタイプ チェーンを徹底的に理解するのに役立ちます

4. nextTick をご存知ですか?実施原理？

---

次の DOM 更新サイクルの後に遅延コールバックを実行します。 nextTickでは主にマクロタスクとマイクロタスクを使用します。実行環境に応じて、

Promise
• MutationObserver
• setImmediate
• を使用してみてください。上記のいずれも機能しない場合は、setTimeout を使用してください。

非同期メソッドが定義されています。nextTick を複数回呼び出すと、メソッドがキューに保存され、この非同期メソッドを通じて現在のキューがクリアされます。

(マクロ タスク、マイクロ タスク、およびイベント ループの詳細については、私の他の 2 つのコラムを参照してください)

(これを見た後、実際に質問するとわかります。基本的な JavaScript スキル)

• ブラウザでの JavaScript のイベント ループ

• Node.js イベント ループ

5. Vue のライフサイクルについて話しましょう

---

##beforeCreate が new Vue() の後にトリガーされる最初のフックでは、現在のステージではデータ、メソッド、計算済み、および監視上のデータとメソッドにアクセスできません。

createdインスタンスの作成後に発生します。現段階でデータの観測は完了しています。つまり、データの使用と変更が可能です。ここでデータを変更しても変更はされません。更新された関数をトリガーします。初期データの取得を実行できます。現在の段階では Dom と対話できません。必要な場合は、vm.$nextTick を通じて Dom にアクセスできます。

beforeMountマウント前に発生します。その前に、テンプレートがインポートされ、レンダリング関数でコンパイルされます。現段階では、仮想 Dom が作成され、レンダリングが開始されるところです。この時点でデータを変更することもできますが、更新はトリガーされません。

mountedマウント完了後に発生します。現段階では、実際の Dom がマウントされ、データが双方向にバインドされ、Dom ノードにアクセスでき、Dom にアクセスできます。 $refs 属性を使用して操作します。

beforeUpdate 更新前に発生します。つまり、応答データが更新され、再レンダリングの前に仮想 dom がトリガーされます。再レンダリングを発生させることなく、現在のステージでデータを変更できます。レンダリング。

updated更新が完了し、現在のステージのコンポーネント Dom が更新された後に発生します。更新の無限ループが発生する可能性があるため、この期間中にデータを変更しないように注意してください。

beforeDestroyインスタンスが破棄される前に発生します。インスタンスは現在の段階で完全に使用できます。この時点で、タイマーのクリアなどの後処理の仕上げ作業を実行できます。

destroyedインスタンスが破棄された後に発生し、この時点では dom シェルのみが残ります。コンポーネントは逆アセンブルされ、データ バインディングは削除され、リスナーは削除され、すべての子インスタンスは破棄されました。

(Vue のライフ サイクルの詳細な説明に興味がある場合は、私の他のコラムを参照してください)

Vue のライフ サイクルをソース コードから解釈して、面接官は理解しました 感動しましたか

## 6. インターフェイスのリクエストは通常​​どのライフサイクルに置かれますか?

インターフェイス リクエストは通常​​、

---

mounted

に配置されますが、サーバー側のレンダリングはマウントをサポートしていないため、created に配置する必要があることに注意してください。 。

7. Computed と Watch について話しましょう

---

Computed

は本質的に、キャッシュと依存プロパティを備えたウォッチャーです。変更が発生するとビューが更新されます。 計算に比較的高いパフォーマンスを消費するコンピューティング シナリオに適しています。式が複雑すぎる場合、テンプレートにロジックを追加しすぎると、テンプレートの保守が困難になります。複雑なロジックを計算プロパティに含めることができます。

Watch

キャッシュはなく、むしろ監視機能であり、特定のデータを監視し、コールバックを実行できます。オブジェクト内のプロパティを詳細に監視する必要がある場合は、deep: true オプションをオンにして、オブジェクト内の各項目が監視されるようにします。これによりパフォーマンスの問題が発生します。最適化するには、 文字列形式 を使用して監視できます。コンポーネントに書き込まれていない場合は、unWatch を使用して手動で をログアウトすることを忘れないでください。

8. v-if と v-show の違いについて話します

条件が成立しないときは

---

v-if

DOM 要素はレンダリングされません。v-show はスタイル (表示) を操作し、現在の DOM の表示と非表示を切り替えます。

9. コンポーネント内のデータが関数なのはなぜですか?

コンポーネントが複数回再利用されると、複数のインスタンスが作成されます。基本的に、

---

これらのインスタンスはすべて同じコンストラクターを使用します

。データがオブジェクトの場合、そのオブジェクトは参照型であり、すべてのインスタンスに影響します。したがって、コンポーネントの異なるインスタンス間でデータが競合しないようにするには、データは関数である必要があります。

10. v-model の原理について話しましょう

---

v-model

は本質的には構文糖衣です。これは、value input メソッドの糖衣構文であることがわかります。 モデル属性の prop
属性と event 属性を使用してカスタマイズできます。ネイティブ v-model は、さまざまなタグに基づいてさまざまなイベントと属性を生成します。

11. Vue イベント バインディングの原理について話しましょう

ネイティブ イベント バインディングは、

---

addEventListener

を通じて実際の要素にバインドされます。イベント バインディングは、Vue のカスタム $on を通じて実装されます。
インタビュアー: (この子の基本はかなり上手です。次はさらに高度なものにならなければなりません)

12. Vue テンプレートのコンパイルの原理をご存知ですか?簡単に説明していただけますか？

Vue のコンパイル プロセスは、簡単に言えば、

---

template

を render 関数に変換するプロセスです。次の段階を経ます:

AST ツリーの生成

• 最適化
• codegen
• 最初にテンプレートを解析します。

AST 構文ツリー

(テンプレート全体を記述する JavaScript オブジェクトの形式) を生成します。 多数の正規表現を使用してテンプレートを解析し、ラベルやテキストに遭遇すると、関連する処理のために対応するフックが実行されます。

Vue のデータは応答性がありますが、実際にはテンプレート内のすべてのデータが応答性があるわけではありません。一部のデータは最初にレンダリングされた後は変更されず、対応する DOM も変更されません。次に、最適化プロセスでは、AST ツリーを深く探索し、関連する条件に従ってツリー ノードにマークを付けます。 これらのマークされたノード (静的ノード) の比較をスキップできます。これにより、ランタイム テンプレートが大幅に最適化されます。

コンパイルの最後のステップは、

最適化された AST ツリーを実行可能コードに変換することです。

インタビュアー: (スピリチュアルな人、あなたは何かを持っています。難易度はさらに上がります。信じなければ、あなたにとっては難しくありません)

13. Vue2.x レンダラーと Vue3.x レンダラーの差分アルゴリズムはそれぞれ次のとおりです。 それについて話しましょう

---

#簡単に言えば、差分アルゴリズムは次のようなプロセスを持っています

同じレベルを比較してから子ノードを比較します
• ##最初に、一方のパーティに子ノードがあり、もう一方のパーティに子ノードがないかどうかを確認します (新しい子に子ノードがない場合は、古い子ノードを削除します)
• 両方の子に子ノード (コア差分) がある状況を比較します
• 子ノードを再帰的に比較します
• 2 つのツリー間の通常の Diff の時間計算量は

O です(n^3)

ですが、実際の状況では cross Hierarchical mobile DOM を実行することはほとんどないため、Vue は Diff from O(n^3) -> O(n)## を最適化します。 #. これは、古い子と新しい子が複数の子ノードである場合にのみ必要です。コア Diff アルゴリズムは、同じレベルの比較を実行します。 Vue2 のコア Diff アルゴリズムは 両端比較

アルゴリズムを採用しており、同時に古い子と新しい子の両端から比較し、キー値を使用して検索します。再利用可能なノードを作成し、関連する操作を実行します。同じ状況下で React の Diff アルゴリズムと比較すると、モバイル ノードの数を減らし、不必要なパフォーマンスの損失を減らすことができ、よりエレガントです。

Vue3.x は、

ivi

アルゴリズムと
inferno アルゴリズム を利用して、VNode の作成時にそのタイプを決定します。 # # マウント/パッチ は、

ビット操作

を使用して VNode のタイプを決定します。これに基づいて、コア Diff アルゴリズムと組み合わせることで、Vue2.x と比較してパフォーマンスが向上します。 (実際の実装は、Vue3.x ソース コードと併せて参照できます。) このアルゴリズムでは、最も長い再帰サブシーケンスを解決するために、動的プログラミングの考え方も使用されています。

(これを見れば、データ構造とアルゴリズムの魅力がフレームワークの随所にあることがわかります)インタビュアー: (分かった、分かった、苗木のようですが、自己紹介をしたいと思います。本当に少し退屈です、次の質問)

(基本、6はやらないでください)

14. 仮想 Dom の役割について話しましょうおよび主要な属性

ブラウザで DOM を操作するのは非常にコストがかかるためです。 DOM 上で頻繁に操作を行うと、特定のパフォーマンス上の問題が発生します。これが仮想 Dom の 理由

です。

---

Vue2 の仮想 DOM は、オープン ソース ライブラリ snabbdom
の実装を利用しています。

Virtual DOM の本質は、ネイティブ JS オブジェクトを使用して DOM ノードを記述することです。これは、実際の DOM からの抽象化レイヤーです。 (つまり、src/core/vdom/vnode.js で定義されているソース コード内の VNode クラスです。)

VirtualDOM を実際の DOM にマッピングするには、create、diff、 VNode のパッチおよびその他のステージ。

key の役割は、DOM 要素を可能な限り再利用することです。

古い子と新しい子のノードの順序だけが異なる場合、要素の位置を移動することで更新の目的を達成するのが最善の操作です。 再利用可能なノードが古い子のノードで見つかるように、古い子のノードと新しい子のノードにマッピング関係を保存する必要があります。キーは、子のノードの一意の識別子です。

15. キープアライブについてご存知ですか?

キープアライブ

コンポーネントのキャッシュを実装できます。 、現在のコンポーネントがアンインストールされます。

---

一般的に使用される 2 つの属性 include/exclude
を使用すると、コンポーネントを条件付きでキャッシュできます。

2 つのライフ サイクル アクティブ化/非アクティブ化。現在のコンポーネントがアクティブかどうかを知るために使用されます。

キープアライブでは、LRU (最も最近使用されていない) アルゴリズムも使用されます。

(再びデータ構造とアルゴリズムです。アルゴリズムにはフロントエンドにも非常に多くのアプリケーションがあることがわかりました)

16. コンポーネントのライフサイクルの呼び出しシーケンスについて話しましょうVue

コンポーネントの呼び出し順序は、最初の親、次に息子

で、レンダリング完了の順序は、

---

最初の息子、次に親

です。 コンポーネントの破棄操作は、最初に親、次に息子
であり、破棄の完了順序は

最初に子、次に親

です。 。 レンダリング プロセスの読み込み

作成前の親 ->作成された親 ->マウント前の親 ->作成前の子 ->作成された子 - > マウント前の子 - > マウントされた子 - > マウントされた親

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

更新前の親 ->更新前の子 ->更新された子の子 ->更新された親

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

parentbeforeUpdate -> 親が更新されました

#破棄プロセス

##親の破棄前 ->子の前の破棄 ->子が破棄 ->親の破棄

#17.Vue2.x コンポーネントと通信する方法は何ですか?

##親子コンポーネント通信

---

親->子
• props

  , 子->親

  $on, $放出

  親子コンポーネントのインスタンスの取得$parent, $children

  Ref コンポーネントのプロパティを呼び出してインスタンスを取得するか、メソッド

  Provide、inject 公式には推奨されていませんが、コンポーネント ライブラリを作成するときに非常によく使用されます

  兄弟コンポーネント通信

  イベント バス
コンポーネント間通信の実装
• Vue.prototype.$bus = new Vue

  Vuex

  コンポーネント間通信

  Vuex

• $attrs、$listeners

  提供、注入

  #18 .SSRってわかりますか？

SSR はサーバー側レンダリングです。つまり、Vue はクライアント側でタグを HTML にレンダリングし、サーバー側でそれを完成させ、その HTML を直接サーバー側に返します。クライアント。終了。

---

SSR には、SEO が向上し、最初の画面の読み込み速度が速くなるという利点があります。ただし、開発条件が限定される、サーバーサイドレンダリングでは beforeCreate と
created

の 2 つのフックしかサポートされない、必要な場合に特別な処理が必要になるなどの欠点もあります。一部の外部拡張ライブラリ。サーバー側レンダリング アプリケーションも Node.js 実行環境にある必要があります。また、サーバーに対する負荷も増大します。

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

エンコード段階

---

データ内のデータとデータを削減してみます。データ内のゲッターとセッターを追加すると、対応するウォッチャーが収集されます
v-if と v-for は一緒に使用できません

v-for を使用してイベントを各要素にバインドする必要がある場合、イベント プロキシを使用します
• SPA ページはキープアライブ キャッシュ コンポーネントを使用します
• #多くの場合、一意であることを保証するために v-show
• key の代わりに v-if を使用します
• ルーティングの使用遅延読み込み、非同期コンポーネント
• アンチシェイク、スロットリング
• オンデマンドでサードパーティ モジュールをインポート
• 長いリストを表示領域にスクロールし、動的に読み込みます
• 画像の遅延読み込み
• SEO 最適化

プリレンダリング サーバーサイド レンダリング SSR

• パッケージの最適化

圧縮コードツリー シェイキング/Scope Hoisting

cdn を使用してサードパーティ モジュールをロード

• マルチスレッド パッケージング happypack
• splitChunks でパブリック ファイルを抽出
• sourceMap の最適化
• ユーザー エクスペリエンス

スケルトン画面PWA

次を使用することもできますキャッシュ (クライアント キャッシュ、サーバー キャッシュ) の最適化とサーバー側の有効化 gzip 圧縮など。
• (最適化は大きなプロジェクトであり、多くの側面が関係します。ここで別の列を開いてください)

20. ハッシュ ルーティングとヒストリー ルーティングの実装原則について話しましょう

location.hash の値は、実際には URL の

# に続くものです。

---

history は実際には、HTML5 で提供される API を使用して実装されます。主に history.pushState() と history.replaceState()
が含まれます。

面接官は隣にあった冷たいコーヒーを手に取り、一口飲みました。 (この人にもっと質問してもいいですか?)プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上が20 以上の知っておくべき Vue 面接の質問 (回答分析付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。