Vue の面接でよくある質問の概要 (回答分析付き)

この記事では、Vue の面接での質問をいくつか紹介します (回答分析付き)。一定の参考値があるので、困っている友達が参考になれば幸いです。

記事に含まれる情報はインターネットおよび個人的な概要から得たものであり、個人的な学習と経験を要約することを目的としています。権利侵害がある場合は、ご連絡ください。削除させていただきます。ありがとうございます。

1. MVVM について理解する

MVVM は、Model-View-ViewModel の略称です。

Model はデータモデルを表し、データの変更や操作のためのビジネスロジックもモデル内に定義できます。

View は、データ モデルを表示用の UI に変換する役割を担う UI コンポーネントを表します。

ViewModel モデル データの変更を監視し、ビューの動作を制御し、ユーザー操作を処理します。簡単に理解すると、ビューとモデルを同期し、モデルとビューを接続するオブジェクトです。

MVVM アーキテクチャでは、ビューとモデルの間に直接の接続はありません。代わりに、ビューモデルを通じて対話します。モデルとビューモデル間の対話は双方向であるため、ビュー データの変更はモデルに同期されます。 . 、モデル データの変更はすぐにビューに反映されます。

ViewModel ビュー レイヤーとモデル レイヤーは双方向のデータ バインディングを通じて接続されており、ビューとモデル間の同期は人間の介入なしで完全に自動的に行われるため、開発者は料金を支払うだけで済みます。ビジネスロジックを意識せず、手動でDOMを操作する必要がなく、データ状態の同期を意識する必要がなく、複雑なデータ状態の維持はMVVMによって完全に管理されます。

2. Vue は双方向データ バインディングを実装します

Vue は主に次の方法で双方向データ バインディングを実装します: データ ハイジャックをパブリッシャー/サブスクライバー モデルと組み合わせて使用​​します。 メソッドを使用して、Object.defineProperty() を通じて各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニング コールバックをトリガーします。プレーンな Javascript オブジェクトをデータ オプションとして Vue インスタンスに渡すと、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してプロパティをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。 (学習ビデオ共有: vue ビデオ チュートリアル)

Vue の双方向データ バインディングは、MVVM をデータ バインディングの入り口として使用し、Observer、Compile、Watcher を統合し、Observer For model を通じて自身を監視します。データ変更、コンパイル テンプレート命令の解析にコンパイルが使用され (vue では、{{}} の解析に使用されます)、最後にウォッチャーを使用してオブザーバーとコンパイル間の通信ブリッジを構築し、データ変更を実現します。 -> 更新の表示、対話型変更 (入力) の表示 -> データ モデル変更の双方向バインディング効果。

3. Vue コンポーネント間のパラメータ転送

1. 親コンポーネントと子コンポーネント間の値の転送

親からの転送コンポーネント 子コンポーネントへ: 子コンポーネントは props メソッドを通じてデータを受け取り、子コンポーネントは親コンポーネントに渡します: $emit メソッドはパラメータを渡します

2. 親以外のコンポーネントと子コンポーネントの間のデータ転送、兄弟コンポーネントは値を渡します

eventBus は、乗換駅に相当するイベント センターを作成し、イベントの配信や受信に使用できます。プロジェクトが比較的小さい場合は、これがより適切です。

4. v-show と v-if の違い

• v-show と v-if の違い:

  v-show は CSS スイッチ、v-if は完全な破壊と再作成です。

• 使用

  頻繁に切り替える場合は v-show を使用し、実行時の変更がほとんどない場合は v-if を使用します

• v -if='false' v-if は条件付きレンダリングです。false の場合はレンダリングされません

5、Vue ライフ サイクル

beforeCreate (作成前) データ観察および初期化イベントが開始される前

created (作成後) データ観察、プロパティとメソッドの操作、初期化イベント、$ の完了el 属性はまだ表示されていません。 マウントが開始される前に

beforeMount (ロード前) が呼び出され、関連するレンダー関数が初めて呼び出されます。インスタンスは次の構成を完了しました: テンプレートをコンパイルし、データとテンプレート内のデータから HTML を生成します。現時点では HTML がページにマウントされていないことに注意してください。

mounted (ロード後) el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後に呼び出されます。インスタンスは次の構成を完了しました。el 属性によって指定された DOM オブジェクトを、上記のコンパイルされた HTML コンテンツに置き換えます。テンプレート内の HTML の HTML ページへのレンダリングを完了します。このプロセス中に Ajax 対話が実行されます。

beforeUpdate (更新前) データが更新される前、つまり仮想 DOM が再レンダリングされ、パッチが適用される前に呼び出されます。追加の再レンダリング プロセスをトリガーせずに、このフックで状態をさらに変更できます。

updated(更新) データ変更による仮想 DOM の再レンダリングとパッチ適用後に呼び出されます。呼び出されるとコンポーネント DOM が更新されているため、DOM に依存した操作を実行できます。ただし、ほとんどの場合、更新の無限ループが発生する可能性があるため、この期間中に状態を変更することは避けるべきです。このフックは、サーバー側のレンダリング中には呼び出されません。

beforeDestroy (破棄前) インスタンスが破棄される前に呼び出されます。インスタンスは引き続き完全に利用可能です。

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

1. vue のライフサイクルとは何ですか?

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

2.vue ライフサイクルの役割は何ですか?

回答: ライフサイクルには複数のイベント フックがあるため、Vue インスタンス全体のプロセスを制御するときに適切なロジックを簡単に作成できます。

3. vue のライフサイクルには何段階ありますか?

回答: 作成前/後、ロード前/後、更新前/後、破棄前/後、合計 8 つの段階に分けることができます。

4. ページが初めて読み込まれるときにどのフックがトリガーされますか?

回答: 次の beforeCreate、created、beforeMount、mount がトリガーされます。

5. DOM レンダリングはどのサイクルで完了しますか?

回答: DOM レンダリングはマウントされた状態で完了します。

5. バインドされたクラスの配列の使用法

• オブジェクト メソッドv-bind:class="{'orange': isRipe, 'green ' : isNotRipe}"
• 配列メソッドv-bind:class="[クラス1, クラス2]"
• Inlinev-bind:style = "{color: color, fontSize: fontSize 'px' }"

6. 計算属性 computed と監視ウォッチ

Computed の違いプロパティは、依存する値の変化を自動的に監視し、コンテンツを動的に返します。監視はプロセスです。監視対象の値が変化すると、コールバックがトリガーされ、何かが実行されます。したがって、違いは使用法にあります。動的な値が必要なだけの場合は、計算されたプロパティを使用します。値の変化を知り、ビジネス ロジックを実行する必要がある場合は、監視を使用します。逆のメソッドや混合メソッドを使用することもできますが、は間違った使い方です。

1. 計算対象がオブジェクトである場合、どのようなオプションがありますか?

get と set

2 の 2 つのオプションがあります。computed とメソッドの違いは何ですか?

methods はメソッドであり、パラメータを受け入れることができますが、computed は受け入れられません。computed はキャッシュできますが、メソッドはキャッシュできません。

3. computed は他のコンポーネントからのデータに依存できますか?

computed は、他の computed、さらには他のコンポーネントのデータにも依存する可能性があります。

4. watch がオブジェクトの場合、どのようなオプションがありますか?

handler deep ディープにするかどうか imeditate すぐに実行するかどうか

概要

一部のデータを他のデータに合わせて変更する必要がある場合は、次のことをお勧めします。計算されたものを使用します。データ変更に対する一般的な応答がある場合、ビジネス ロジックや非同期操作を実行するときにウォッチャーを使用することをお勧めします

#7. Vue のルーティング実装: ハッシュ モードとヒストリー モード

ブラウザでは、記号「#」、# および # 以降の文字をハッシュと呼び、window.location.hash; で読み取られます。 URL, ただし、HTTP リクエストには含まれていません。ブラウザのアクションをガイドするために使用され、サーバー側のセキュリティには役に立ちません。ハッシュはページをリロードしません。ハッシュ モードでは、http://www.xxx.com など、ハッシュ記号の前のコンテンツのみがリクエストに含まれるため、バックエンドでは、ルートの完全なカバレッジが達成されない場合でも、404 は含まれません。返品されるのは間違いです。

history は HTML5 の新機能を採用し、ブラウザ履歴スタックを変更するための PushState()、replaceState()、およびステータスを監視するための PopState イベントという 2 つの新しいメソッドを提供します。変化します。履歴モードでは、フロントエンドの URL は、バックエンドへのリクエストを実際に開始する URL (http://www.xxx.com/items/id など) と一致している必要があります。バックエンドに /items/id のルーティング処理がない場合、404 エラーが返されます。

(バージョンは常に更新されているため、次の違いはあまり正確ではない可能性があります。私は仕事で vue のみを使用しており、angular や React についてはあまり詳しくありません)

1. AngularJS との違い

:

両方のサポート命令: 組み込み命令とカスタム命令、両方のサポート フィルター: 組み込みフィルターとカスタム フィルター、両方とも双方向データ バインディングをサポート、ローエンド ブラウザーはサポートしません。

父：
<child ref="childMethod"></child>
子：
method: {
  test() {
     alert(1)
  }
}
在父组件里调用test即 this.$refs.childMethod.test()

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

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