Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。

この記事では、Vue の面接でよくある 37 の質問を要約して共有し、基礎を強化し、Vue の知識の蓄えを強化するのに役立ちます。

関連する推奨事項: 2022 年の主要なフロントエンド面接の質問の概要 (コレクション)

1. 話すMVVM についてどのように理解していますか?

簡略化されたマッピング関係、隠しコントローラー MVC に基づいて、MVVM は制御層を隠します。

Vue は MVVM フレームワークではなく、ビュー層フレームワークです。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

ViewModal は、データをビューに関連付けるブリッジです。

2.Vue のレスポンシブ データについての理解について話してください。

配列とオブジェクト型の値が変更されると、すべてのプロパティが getter と setter で追加されます。ユーザーは、値の取得および設定時にいくつかの操作を実行できます。 欠点: 最も外側の属性のみを監視でき、多層の場合は完全な再帰が必要です。 Get は依存関係の収集を行います (dep[watcher, watcher]) データの更新はセット内で行われます (通知、ウォッチャーに更新を通知)

3. Vue で配列の変更を検出するにはどうすればよいですか?

Vue は配列の Property を定義しませんが、配列の 7 つのメソッドを書き換えます。

push

shift

• pop
• splice
• unshift
• sort## です。
#reverse
• これらのメソッドは配列自体を変更するためです。
• 配列内のインデックスと長さは監視できません。

4. Vue で依存関係を収集するにはどうすればよいですか?

#Vue が初期化されると、マウント後にコンパイルされます。 renderFunctionを生成します。

値が取得されると、ウォッチャーが収集され、dep に配置されます。

ユーザーが値を変更すると、ビューを更新するようにウォッチャーに通知されます。

5. Vue でのテンプレートのコンパイル原理を理解するにはどうすればよいですか?

この問題の核心は、テンプレートをレンダリング関数に変換する方法です。

テンプレート モジュールを ast 文法書に変換します - parserHTML

静的文法をマークします (一部のノードは変更されません)

コード codeGen を再生成します。 with 構文は文字列をラップします
2. 6. Vue ライフ サイクル フックはどのように実装されますか?
3. Vue のライフ サイクル フックはコールバック関数であり、コンポーネント インスタンスの作成時に呼び出されます。フック方式。 フックは内部で処理され、フック関数は配列の形式で保持されます。

7. Vue コンポーネントのライフサイクルは何ですか?

beforeCreate は、インスタンスが初期化された後、データ監視オブザーバー、イベント、ウォッチャーのイベント設定前に呼び出されます。

created インスタンスが作成されました。このステップでは、次の設定が行われます。完了

データ観測
• プロパティとメソッドの操作
• 監視/イベント時コールバック
  • $elはまだ生成されていません
  • ##beforeMount マウント前に呼び出され、render はまだ呼び出されません。
  • mounted el は新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後に呼び出されます。
  beforeUpdate は、データが更新されるときに呼び出されます。仮想 Dom が再レンダリングされ、パッチが適用される前に発生します。
• update データ変更により仮想 Dom が再レンダリングされ、パッチが適用されます。その後
• beforeDestroy は、インスタンスが破棄される前に呼び出されます
• destroyed は、インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンス内のすべてのバインドが解除され、すべてのイベント リスナーが削除され、サブインスタンスはこのフックはサーバー側のレンダリング中に呼び出されません
• キープアライブ (アクティブ化および非アクティブ化)
• 8. vue.mixin の使用シナリオと原則?
• Vue のミックスインの機能はパブリック ビジネス ロジックを抽象化することであり、その原理はオブジェクトの継承と似ています。コンポーネントが初期化されると、マージするために mergeOptions メソッドが呼び出され、異なるものをマージするためにストラテジー モードが使用されます。属性。 混合データが自身のコンポーネントのデータと矛盾する場合は、自身のデータが優先されます。
• 欠点: 名前の競合、不明瞭なデータ ソース

9. Vue のコンポーネント データが関数である必要があるのはなぜですか?

新しい Vue

は単一ですサンプル モードでは、マージ操作は行われないため、ルート インスタンスはデータが関数である必要があることを確認する必要がありません。 コンポーネントのデータは、2 つのコンポーネントのデータが汚染されないように機能する必要があります。 それらがすべてオブジェクトの場合、マージされたときに同じアドレスを指します。 また、関数の場合は、マージ中に呼び出されるときに 2 つのスペースが生成されます。

10. nextTickの原理を説明してください。

nextTick はマイクロタスクです。 <ul> <li>nextTick のコールバックは、次の Dom 更新サイクルが終了した後に実行される遅延コールバックです。</li> <li>更新された Dom を取得するために使用できます。</li> <li>Vue でのデータ更新は非同期です。 nextTick を使用すると、更新後にユーザー定義のロジックが確実に実行されるようになります。 </li> </ul> <h2 data-id="heading-10"> 11. computed と watch の違いは何ですか? </h2> <ul> <li>Computed と watch はどちらも watcher に基づいて実装されています。 </li> <li>計算された属性はキャッシュされ、依存する値は変化しません。値を取得するときに、計算された属性メソッドが繰り返し実行されることはありません。</li> <li>watch は、値の変化を監視することです。値が変更されると、コールバック関数が呼び出されます </li> </ul> <h2 data-id="heading-11"> 12. Vue.set メソッドはどのように実装されますか? </h2> <ul> <li>vue は、オブジェクトと配列自体の両方に dep 属性を追加します。</li> <li>存在しない属性がオブジェクトに追加されると、オブジェクトが依存するウォッチャーがトリガーされますto update</li> <li>配列インデックスを変更するときは、配列自体の splice メソッドを呼び出して配列を更新します</li> </ul> <h2 data-id="heading-12">13. Vue が仮想 Dom</h2> <ul># を使用する理由##仮想 dom は、js オブジェクトを使用して実際の Dom を記述することです。 現実の Dom を抽象化したものです。<li>Dom を直接操作するのはパフォーマンスが低いため、js 層の操作効率が高く、Dom の操作は可能です。オブジェクト操作に変換されます。 Dom<li>Virtual Dom は実プラットフォーム環境に依存せず、クロスプラットフォームを実現します<li> </ul>14. 原理とはVueの差分アルゴリズム? <h2 data-id="heading-13"></h2>Vue の差分アルゴリズムはフラット比較であり、クロスレベル比較は考慮されていません。ダブル ポインターを使用した比較には、内部で深い再帰が使用されます。<p></p> <ul>最初に 2 つのノードが同じノードかどうかを比較します。<li>同じノードの属性を比較し、古いノードを再利用します。<li>まず息子ノードを比較し、古いノードと新しいノードの息子の状況を考慮します。<li>比較を最適化します: 頭から頭、尾から尾、頭から尾、尾からhead<li>比較と検索、再利用<li> </ul>15. Vue はデータ ハイジャックによるデータの変更を正確に検出できるのに、違いを検出するために diff を実行する必要があるのはなぜでしょうか。 <h2 data-id="heading-14"></h2> <ul>応答性の高いデータ変更。Vue は実際にデータがいつ変更されるかを知ることができ、応答性の高いシステムは即座にそれを知ることができます。ただし、各属性にウォッチャーを追加すると、パフォーマンスが非常に低下します。 <li>粒度が細かすぎると不正確な更新が発生します<li> </ul>そのため、差異を検出するためにウォッチャー Diff アルゴリズムが使用されます。 <p></p>16. キーの機能と原理を説明してください<h2 data-id="heading-15"></h2> <ul>パッチ プロセス中に、Vue はキーを通じて 2 つの仮想ノードが同じノードであるかどうかを判断できます。 <li>キーがないと更新中に問題が発生します<li>インデックスをキーとして使用しないようにしてください<li> </ul> <p><img src="https://img.php.cn/upload/image/354/633/583/164515119671716Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515119671716Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p>Seventeen、それについて話しましょう コンポーネントの理解<h2 data-id="heading-16"></h2> <ul>コンポーネント ベースの開発により、アプリケーション開発の効率、テスト容易性、再利用性が大幅に向上します<li>一般的に使用されるコンポーネント ベースのテクノロジ: プロパティ、カスタム イベント、スロット<li>更新範囲を縮小し、変更されたコンポーネントを再レンダリングします<li>高結合性、低結合、一方向のデータ フロー<li> </ul>18. のレンダリング プロセスについて説明してください。コンポーネント <h2 data-id="heading-17"></h2>コンポーネントの仮想ノードを生成 -> コンポーネントの実ノードを作成 -> ページに挿入<p></p> <p><img src="https://img.php.cn/upload/image/955/870/179/164515120143186Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515120143186Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <h2 data-id="heading-18">19. の更新プロセスについて説明してください。コンポーネント</h2> <p>属性の更新は patchVnode メソッドをトリガーし、コンポーネントの仮想ノードはプリパッチ フックを呼び出し、プロパティを更新してコンポーネントを更新します。 </p> <p><img src="https://img.php.cn/upload/image/221/406/498/164515120668556Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515120668556Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p>##20. 非同期コンポーネントの原則<h2 data-id="heading-19"></h2>最初に非同期プレースホルダー ノードをレンダリングします -> コンポーネントがロードされた後、forceUpdate を呼び出して更新を強制します。 <p></p>21. 機能コンポーネントの利点と原理<h2 data-id="heading-20"></h2> <ul>機能コンポーネントの特徴: ステートレス、ライフサイクルなし、これなし。そのため、パフォーマンスは少し高くなります。 <li>#通常コンポーネントは、Vue を継承したクラスです。 </ul> <p>機能コンポーネントは通常の機能です。 </p> <h2 data-id="heading-21">22. コンポーネントに値を渡す方法にはどのようなものがありますか? </h2> <ol>#props と <li><span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow>e<mi></mi>m<mi></mi>i<mi></mi>t<mi></mi>:<mo></mo>親コンポーネントは、<mtext></mtext>p<mi></mi>r<mi></mi>o<mi> を通じて子コンポーネントにデータを渡します。 </mi>p<mi></mi>合格。子コンポーネントは、<mtext></mtext></mrow>emit を介して親コンポーネントにデータを渡します。親コンポーネントは、prop を介して子コンポーネントにデータを渡します。子コンポーネントは、<annotation encoding="application/x-tex"></annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.65952em;vertical-align:0em;">##e</span><span class="mord mathnormal">m</span><span class="mord mathnormal">i を通じて親コンポーネントにデータを渡します。 </span><span class="mord mathnormal">t</span><span class="mord mathnormal"></span><span class="mspace" style="margin-right:0.2777777777777778em;">:</span><span class="mrel"></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base">##親<span class="strut" style="height:0.8777699999999999em;vertical-align:-0.19444em;">##グループ</span><span class="mord cjk_fallback">ピース</span><span class="mord cjk_fallback"></span><span class="mord cjk_fallback">子</span><span class="mord cjk_fallback">グループ</span><span class="mord cjk_fallback">ピース</span><span class="mord cjk_fallback"></span><span class="mord cjk_fallback">パスに送信</span><span class="mord cjk_fallback">number</span><span class="mord cjk_fallback"></span><span class="mord cjk_fallback"> によると、</span><span class="mord cjk_fallback">pass</span><span class="mord cjk_fallback">p</span><span class="mord cjk_fallback">r </span><span class="mord cjk_fallback">o </span><span class="mord mathnormal">p</span><span class="mord mathnormal" style="margin-right:0.02778em;">パス</span><span class="mord mathnormal">パス</span><span class="mord mathnormal">。 </span><span class="mord cjk_fallback">子</span><span class="mord cjk_fallback">グループ</span><span class="mord cjk_fallback">ピース</span><span class="mord cjk_fallback">転送</span><span class="mord cjk_fallback">配信</span><span class="mord cjk_fallback">データ</span><span class="mord cjk_fallback">データ</span><span class="mord cjk_fallback">へ</span><span class="mord cjk_fallback">親</span><span class="mord cjk_fallback">グループ</span><span class="mord cjk_fallback">ピース</span><span class="mord cjk_fallback">は</span><span class="mord cjk_fallback">合格</span><span class="mord cjk_fallback">合格</span><span class="mord cjk_fallback"></span><span class="mord cjk_fallback"></span>イベントを発行<span class="mord cjk_fallback"></span></span></span></span></span></li> <li>##p<span class="math math-inline"><span class="katex">a<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML">r<semantics><mrow>e<mi></mi>n<mi></mi>t<mi></mi>,<mi></mi><mi>親,</mi><mi> </mi><mo separator="true"></mo></mrow><annotation encoding="application/x-tex"></annotation>##p</semantics></math>a</span><span class="katex-html" aria-hidden="true">r<span class="base"><span class="strut" style="height:0.80952em;vertical-align:-0.19444em;">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord mathnormal" style="margin-right:0.02778em;">,</span><span class="mord mathnormal"></span><span class="mord mathnormal"></span>children は、現在のコンポーネントの親コンポーネントと現在のコンポーネントの子コンポーネントを取得します<span class="mord mathnormal"></span> <span class="mpunct"></span></span></span></span></span>a</li> <li>t<span class="math math-inline"><span class="katex">t<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML">r<semantics><mrow>s<mi> </mi>and<mi></mi><mi>attrs と</mi><mi></mi><mi></mi><mtext></mtext></mrow>##a<annotation encoding="application/x-tex"></annotation>t</semantics> </math>t</span><span class="katex-html" aria-hidden="true">r<span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;">s</span><span class="mord mathnormal"> と </span><span class="mord mathnormal"></span><span class="mord mathnormal"></span>リスナー。 <span class="mord mathnormal" style="margin-right:0.02778em;"></span>親コンポーネントはprovideを通じて提供され、子コンポーネントはinjectを通じて変数を注入します<span class="mord mathnormal"></span>$refはインスタンスを取得します<span class="mord cjk_fallback"></span>eventBusレベルコンポーネントのデータ転送</span></span> Vuex</span> </span> </li>23. $attrs はどのような問題を解決すると思われますか? <li>主な機能はデータをバッチで転送することです。 <li>provide/inject は、主にクロスレベルのデータ転送を実現するために、プラグインでのアプリケーションに適しています。 <li>24、v-for と v-if ではどちらが優先されますか? <li>まず、v-for と v-if を同じタグ内で使用することはできません。 </ol> <h2 data-id="heading-22">最初に v-for を処理し、次に v-if を処理します。 </h2> <p>同時に発生した場合は、最初に計算属性を使用してデータを処理し、次に v-for を実行してループの数を減らすことを検討する必要があります。 </p> <h2 data-id="heading-24">25. v-mode はどのように実装されますか? </h2> <p>コンポーネントで使用される v-model はモデルとコールバックです</p> <p><img src="https://img.php.cn/upload/image/232/316/517/164515121222468Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515121222468Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <p>v-model が通常の要素で使用される場合、命令が生成され、さまざまな要素によっても引き起こされる可能性があります: </p> <ul>#値の生成と入力<li>変更の生成とラジオ<li>変更の生成とチェック<li> </ul> <p><img src="https://img.php.cn/upload/image/880/723/367/1645151217523460.png" title="1645151217523460.png" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p>命令はいつ呼び出されますか? <p></p> <p><img src="https://img.php.cn/upload/image/241/554/517/164515122344551Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515122344551Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"># ソースコード: </p> <p></p> <p><img src="https://img.php.cn/upload/image/961/193/717/164515123025845Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515123025845Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。">26. Vue の通常の Slot とスコープ Slot の違い</p>#ノーマルスロット<h2 data-id="heading-25"></h2>ノーマルスロットはレンダリング後に差し替える作業です。親コンポーネントがレンダリングされたら、子コンポーネントのコンテンツを置き換えます。 <h3 data-id="heading-26"></h3> <p></p> <p>#テンプレートをコンパイルするときに、コンポーネント内の子ノードとスロット タグを処理します。<img src="https://img.php.cn/upload/image/111/119/762/164515123662208Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515123662208Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <p></p> <p>要素を作成するときに、 _v() の内容を _t() メソッドに置き換えます。 <img src="https://img.php.cn/upload/image/330/265/291/164515124173652Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515124173652Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <p></p> <p>スコープ スロット<img src="https://img.php.cn/upload/image/822/212/701/164515124780763Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515124780763Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p>スコープ スロットは、サブコンポーネントのプロパティを取得できます。子コンポーネントにプロパティを渡してレンダリングします。 <h3 data-id="heading-27"></h3> <p></p> <p><img src="https://img.php.cn/upload/image/794/886/921/164515125363984Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515125363984Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <p> スコープ スロットのコンパイル結果: <img src="https://img.php.cn/upload/image/448/350/913/164515125795795Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515125795795Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <p></p> <p><img src="https://img.php.cn/upload/image/773/710/564/164515126445525Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515126445525Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"> </p> <p>28.Vue.use は何をするのですか? <img src="https://img.php.cn/upload/image/105/323/415/164515126813379Vue%20%E3%81%AE%E9%9D%A2%E6%8E%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%2037%20%E3%81%AE%E8%B3%AA%E5%95%8F%E3%81%A7%E3%80%81Vue%20%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AE%E8%93%84%E3%81%88%E3%82%92%E5%BC%B7%E5%8C%96%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" title="164515126813379Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。" alt="1Vue の面接でよくある 37 の質問で、Vue の知識の蓄えを強化できます。"></p> <h2 data-id="heading-28">Vue.use</h2> はプラグインを使用するために使用されます。グローバルコンポーネント、ディレクティブ、プロトタイプメソッドなどをプラグインで拡張できます。 <p>install<code> メソッドは、デフォルトで Vue 構築関数を渡すために呼び出されます。vue ライブラリ

# に依存せずにプラグインで vue を使用できます。 ## 29. コンポーネント 名前を書くメリットは何ですか?

name 属性を追加すると、コンポーネント自体がコンポーネント属性に追加され、コンポーネントの再帰呼び出しが実装されます。

は、デバッグと対応するコンポーネントの検索を容易にするために、コンポーネントの特定の名前を表すことができます。

• 30. vue の修飾子は何ですか?

.stop

.prevent

• .capture
• .self
• .once
• . passive
• .right
• .center
• .middle
• .alt
• 31. カスタマイズ手順を理解するにはどうすればよいですか?

ast 構文ツリーを生成するとき、命令に遭遇すると、現在の要素に directives 属性が追加されます

genDirectives を通じて命令コードを生成します

• パッチ適用前、ディレクティブの追加 フックが cbs に抽出され、パッチ処理中に対応するフックが呼び出されます
• cbs に対応するフックが実行されると、対応する命令定義メソッドが呼び出されます
• 32、通常はキープアライブ どこで使用しますか?原理は何ですか?

キープアライブを使用して動的コンポーネントをラップする場合、コンポーネントの再作成を避けるためにコンポーネントはキャッシュされます

使用シナリオは 2 つあり、1 つは動的コンポーネントです。コンポーネントともう 1 つは router-view

#ホワイトリストとブラックリストがここで作成されます。何をキャッシュする必要があり、何をキャッシュする必要がないのかを示します。そしてキャッシュの最大数。

#キャッシュはコンポーネントのインスタンスであり、キーと値のオブジェクトとともに保存されます。

ロード時に、包含と除外を監視します。

キャッシュが必要ない場合は、仮想ノードを直接返します。

キャッシュする必要がある場合は、コンポーネントの ID とタグ名を使用してキーを生成し、現在の vnode のインスタンスを値として使用し、それをオブジェクトとして保存します。これはキャッシュ リストです。

キャッシュの最大数が設定されている場合は、0 番目のキャッシュを削除します。最新のキャッシュを追加します。

そして、keepAlive 変数をコンポーネントに追加して true にします。コンポーネントが初期化されると、初期化されなくなります。

33. vue-router にはフック関数がいくつありますか?実行プロセスはどうなっていますか?

フック関数には次の 3 種類があります。

• グローバル ガード
• ルーティング ガード
• コンポーネント ガード

##34. vuerouter の 2 つのモードの違い

vue-router には 3 つのモード、つまり hash、history、abstract
• Abstract があります。シーンを変更するためのブラウザ API の使用はサポートされていません
• ハッシュ モードは互換性が良いですが、美しくなく、SEO に役立ちません
• 履歴は美しく、historyAPI PopState ですが、更新すると 404 が発生します

35. Vue のパフォーマンスの最適化とは何ですか?

データレベルを深くしすぎず、応答性の高いデータを適切に設定します
• データを使用するときは、値の結果をキャッシュし、頻繁に値を取得しないでください
キーを適切に設定します
• ##v-show (頻繁な切り替えに対する高パフォーマンス) と v-if
• コンポーネントの粒度を制御する -> Vue はコンポーネント レベルの更新を使用します
• 機能コンポーネントを使用する - > 機能アセンブリはオーバーヘッドが低い
##非同期コンポーネントを使用する -> Webpack の下請け戦略を使用する
• #キープアライブを使用してコンポーネントをキャッシュする
• 仮想スクロール、タイムシェアリング 映画およびその他の戦略
• パッケージの最適化
• 36. Vuex についての理解について話してください。

Vuex は、vue 用に特別に提供されたグローバル状態管理システムで、複数のコンポーネントでのデータ共有とデータ キャッシュに使用されます。

問題: 永続化できません。

mutation は主に状態を変更し、それを同期的に実行します。

action は再利用を容易にするためにビジネス コードを実行します。ロジックは非同期にすることができます。ステータスを直接変更することはできません。
• 37. vue ではどのようなデザイン パターンが使用されていますか?

シングル ケース モード: 複数回新規作成、インスタンスは 1 つだけ

ファクトリ モード: を渡すことで作成できます。 in パラメータ インスタンス (仮想ノードの作成)

パブリッシュおよびサブスクライブ モード:eventBus
• オブザーバー モード:watch および dep
• プロキシ モード:_data 属性、プロキシ、アンチシェイク、スロットル
• 中間モード: vuex
• 戦略モード
• 外観モード
• 元のアドレス: https://juejin.cn / post/7043074656047202334

著者: Hai Mingyue

(学習ビデオ共有:

Web フロントエンド

)