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

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

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

[推奨される関連する面接の質問: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では主にマクロタスクとマイクロタスクを使用します。実行環境に応じて、

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 fromO(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ってわかりますか？