序文
この主要なムーバーであるスーパースター グループのインタビューに関するよくある質問
記事ディレクトリ
問題の結論
コンポーネント通信？
(1) props、$emit
親コンポーネントは props を介して子コンポーネントに値を渡し、子コンポーネントは $emit カスタム イベントを介して親コンポーネントに値を渡します
(2) $emit と $on
コンポーネントの間。 var Event = new Vue(); で親子コンポーネントに限定
イベントバスとして、 Event.$emit(イベント名, データ), Event.$on(イベント名, データ=>{}) 3) vuex vuex で実現一方向のデータ フロー、[vueComponent
]
から $store.disaptch('event name', data) を介して [Actions] をトリガーし、次に $store.commit() を介して [mutation] をトリガーし、最後に [state] を更新します 4) $
attrs 、$listeners
$attrs は親コンポーネントを含みます props のすべての属性は v-bind="$attrs" を介して内部コンポーネントに渡すことができ、$listeners は親コンポーネントのすべての v-on イベントを含み、内部コンポーネントに渡すことができますv-on="$listeners" によるコンポーネント
( 5) 提供、注入
先祖コンポーネントは提供を通じて変数を提供し、その後、子孫コンポーネントは注入および使用を通じて変数を注入します
(6) $ 親、$ 子、参照 参照は
DOM で使用されます。参照は DOM 要素を指し、ref はサブコンポーネントで使用されます 上記の参照はコンポーネント インスタンスを指します
Vuex はプロジェクトで使用されていますか?
閉鎖
よくあるデザインパターン？
) シングルトン パターン。
シングルトン パターンは、一般的に使用されるソフトウェア設計パターンです。
そのコア構造には、シングルトン クラスと呼ばれる特別なクラスが 1 つだけ含まれています。シングルトン モードでは、システム内にクラスのインスタンスが 1 つだけ存在し、そのインスタンスが外部から簡単にアクセスできるようにすることができます。これにより、インスタンス数の制御が容易になり、システム リソースが節約されます。
アプリケーション シナリオ: システム内に特定のクラスのオブジェクトを 1 つだけ存在させたい場合は、シングルトン モードが最適なソリューションです。
2) 工場モード。
factory パターンは、主にオブジェクトを作成するためのインターフェイスを提供します。
アプリケーション シナリオは次のとおりです:
a. コーディング時に、どのタイプのインスタンスを作成する必要があるかを予測することは不可能です。
b. システムは、製品クラスのインスタンスがどのように作成、構成、および表現されるかの詳細に依存するべきではありません。
3) 戦略モード。
戦略パターン: アルゴリズム ファミリを定義し、それらを互いに置き換えられるように個別にカプセル化します。このモードでは、アルゴリズムを使用するクライアントとは独立してアルゴリズムを変更できます。
アプリケーションのシナリオは次のとおりです。
a. 一つには、達成できる解決策はたくさんあります。
b. 使用する実装をいつでも決定できます。
c. 今後、さらに多くのプランが追加される可能性があります。
d. 戦略モードは、プランの変更がプランを使用する顧客に影響を与えないようにします。
ビジネス シナリオの例は次のとおりです。
システムの運用には、ログ記録が必要です。通常、ログは、その後の管理を容易にするためにデータベースに記録されます。ただし、ログをデータベースに記録すると、エラーが発生する場合があります。たとえば、一時的にデータベースに接続できない場合、それらをファイル内に記録します。ログをデータベースとファイルに書き込むアルゴリズムは 2 つありますが、呼び出し元は気にせず、書き込みのみを担当します。
4) オブザーバーモード。
パブリッシュ/サブスクライブ モードとも呼ばれるオブザーバー モードは、オブジェクト間の 1 対多の依存関係を定義します。
アプリケーション シナリオは次のとおりです:
a. オブジェクトの状態を更新するには、他のオブジェクトを同期的に更新する必要があり、他のオブジェクトの数は動的に変化します。
b. オブジェクトは、他のオブジェクトの詳細を知らずに、自身の更新を他のオブジェクトに通知するだけで済みます。
5) イテレータモード。
Iterator パターンは、オブジェクトの内部表現を公開せずに、集約オブジェクトの要素に順次アクセスする方法を提供します。
アプリケーションのシナリオは次のとおりです。
集約されたオブジェクトにアクセスする必要があり、これらのオブジェクトが何であれトラバースする必要がある場合は、反復子モードの使用を検討する必要があります。実際、stl コンテナーは反復子パターンの良い例です。
6) テンプレート メソッド パターン。
The template method pattern defines the bone of an algorithm in an operation, deferring some steps to subclass. テンプレート メソッドにより、サブクラスは、アルゴリズムの構造を変更することなく、アルゴリズムのいくつかのステップを再定義できます。
6 つの一般的な設計パターンとアプリケーション シナリオ
コンポーネントの状態をキャッシュする方法は?
vue-18 は現在のコンポーネントをどのようにキャッシュしますか? キャッシュ後に更新する方法は？
ディープコピー？
ブラウザのキャッシュ
ブラウザがリソースを初めてロードすると、サーバーは 200 を返し、ブラウザはサーバーからリソース ファイルをダウンロードし、次回のロード時に比較するためにリソース ファイルと応答ヘッダーをキャッシュします。必須のキャッシュ優先度が
高いほど、最初に現在の時刻と 200 が返された最後の時刻との時間差を比較し、それがキャッシュ コントロールによって設定された max-age を超えていない場合、期限切れではなく、強力なキャッシュがヒットし、リソースがローカルから直接読み取られます。ブラウザが HTTP1.1 をサポートしていない場合は、expires ヘッダーを使用して有効期限が切れているかどうかを判断します。
リソースの有効期限が切れている場合は、必須キャッシュがヒットしていないことを示し、キャッシュのネゴシエーションを開始し、If でメッセージを送信します。 -None-Match および If-Modified- 要求以降; 要求を
受信した後、サーバーはまず、要求されたファイルが Etag 値に従って変更されているかどうかを判断します.Etag 値が一致している場合、変更はなく、ネゴシエーション キャッシュがヒットし、304 が返される; 矛盾している場合は、変更があり、新しいリソースが直接返される 新しい Etag 値をファイルに持ってきて、200 を返す; サーバーが受信した要求に Etag 値がない
場合、If-Modified-Since を要求されたファイルの最終変更時刻と比較し、それらが一致する場合は、ネゴシエーション キャッシュにヒットし、304 を返します; 不一致 次に、新しい最終変更とファイルを返し、200 を返します。
ElementUI コンポーネントを 2 回カプセル化しましたか?
vue-cli はどのように element-ui コンポーネントを再パッケージ化しますか?
コンポーネントのパッケージ
- コードの一部が
プロジェクトに 2 回出現する場合は、カプセル化する必要があります. 3 回出現する場合は、カプセル化する必要があります. ページやコンポーネントのように大きくすることも、関数や CSS スタイルのように小さくすることもできます. . - カプセル化の原則
1. 単一の原則: 1 つのページのレンダリングを担当
2. 複数の責任: 複数の責任、データ取得、ロジックの再利用、ページのレンダリングなどを
担当変数の重複を避けるために _ を使用
4. スケーラビリティ: 要件の変更は、以前のコードに影響を与えずに適時に調整できます
5. コード ロジックは明確です
6. パッケージ化されたコンポーネントは、高性能で低結合の特性を備えている必要があります
7. コンポーネントには単一の責任: ビジネス コンポーネントまたは基本コンポーネントをカプセル化します。このコンポーネントに意味のある名前を付けることができない場合は、このコンポーネントの責任が十分に単一ではない可能性があることを証明しており、独立したコンポーネントになるまでコンポーネントを抽出し続ける必要があります。