Vue の面接でよくある質問のまとめ
MVVMモデル?
MVVM ( Model-View-ViewModelMVVM の略語) は、本質的にはMVCモデルのアップグレード バージョンです。その中でModel、 はデータ モデルを表し、View表示されているページを表し、ViewModelと の間のブリッジです。データはレイヤーにバインドされView、自動的にデータをページにレンダリングします。ビューが変更されると、レイヤーは更新するように通知されます。データ。以前はビューはアクションによって更新されていましたが、現在は です。ModelViewModelViewModelDOM数据驱动视图
Vueのライフサイクル
Vue のライフ サイクルは、作成前後、マウント前後、更新前後、破棄前後、およびいくつかの特別なシナリオのライフ サイクルの 8 段階に分けることができます。Vue 3 では、デバッグとサーバーサイド レンダリング用の 3 つの新しいシーンも追加されています。
| Vue 2 のライフサイクル フック | Vue 3 オプション API のライフサイクル オプション | Vue 3 構成 API のライフサイクル フック | 説明する |
|---|---|---|---|
beforeCreate |
beforeCreate |
setup() |
作成前、この時点のデータはdataまだmethods初期化されていません。 |
created |
created |
setup() |
作成後、data値が含まれていますが、まだマウントされておらず、いくつかのAjaxリクエストを行うことができます。 |
beforeMount |
beforeMount |
onBeforeMount |
マウントする前に、仮想が検出されDOM、コンパイルされます。Render |
mounted |
mounted |
onMounted |
マウント後に作成され、データや要素DOMにアクセスするために使用できます。DOM |
beforeUpdate |
beforeUpdate |
onBeforeUpdate |
アップデート前、アップデート前の各種ステータスを取得するために使用できます |
updated |
updated |
onUpdated |
更新後、すべてのステータスが最新になります |
beforeDestroy |
beforeUnmount |
onBeforeUnmount |
破棄する前に一部のタイマーやサブスクリプションをキャンセルするために使用できます |
destroyed |
unmounted |
onUnmounted |
破壊後は、一部のタイマーや定期購入のキャンセルに使用できます |
activated |
activated |
onActivated |
keep-aliveキャッシュされたコンポーネントがアクティブ化されたとき |
deactivated |
deactivated |
onDeactivated |
keep-aliveキャッシュされたコンポーネントが非アクティブ化された場合 |
errorCaptured |
errorCaptured |
onErrorCaptured |
子孫コンポーネントからエラーをキャッチしたときに呼び出されます |
| — | renderTracked |
onRenderTracked |
デバッグ フック。リアクティブな依存関係が収集されるときに呼び出されます。 |
| — | renderTriggered |
onRenderTriggered |
デバッグ フック。リアクティブな依存関係がトリガーされたときに呼び出されます。 |
| — | serverPrefetch |
onServerPrefetch |
コンポーネントインスタンスがサーバー上でレンダリングされる前に呼び出されます |
** Vue 3 のライフサイクルについては、公式ドキュメント <img src="https://link.juejin.cn/?target=https%3A%2F%2Fcn.vuejs.org%2Fapi%" を読むことをお勧めします。 2Fcomposition-api-lifecycle .html “https://cn.vuejs.org/api/composition-api-lifecycle.html”)[オプション API: ライフサイクル オプション – 公式ドキュメント](https://link.juejin.cn/ ?target= https%3A%2F%2Fcn.vuejs.org%2Fapi%2Foptions-lifecycle.html “https://cn.vuejs.org/api/options-lifecycle.html”” style=”margin: auto” / >
親子コンポーネントのライフサイクル: * 加载渲染阶段: 親 beforeCreate -> 親作成 -> 親 beforeMount -> 子 beforeCreate -> 子作成 -> 子 beforeMount -> 子マウント -> 親マウント
更新阶段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated销毁阶段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
Vue.$nextTick
次の DOM 更新サイクルの後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。
nextTickこれは Vue が提供するグローバル API です。Vue の非同期更新戦略により、データの変更は DOM に直接反映されません。現時点で、更新された DOM ステータスをすぐに取得したい場合は、このメソッドを使用する必要があります。
Vue は、DOM を更新するときに非同期で実行されます。データが変更されると、Vue は非同期更新キューを開き、同じイベント ループ内で発生するすべてのデータ変更をバッファーに入れます。同じものwatcherが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。バッファリング中のこの重複排除は、不必要な計算や DOM 操作を回避するために非常に重要です。nextTickこのメソッドはコールバック関数をキューに追加し、前の DOM 操作が完了した後にのみ関数が呼び出されるようにします。
使用するシーン:
DOM1.データを変更した直後に更新された構造を取得したい場合は、 Vue.nextTick()
2.createdライフサイクルでDOM操作することができます。
Vue インスタンスのマウント プロセス中に何が起こりますか?
マウント プロセスは、と のapp.mount()2 つのことを全体として実行する初期化プロセスを指します。初始化建立更新机制
初期化では、コンポーネント インスタンスが作成され、コンポーネントの状態が初期化され、さまざまな応答データが作成されます。
更新メカニズムを確立するステップでは、コンポーネントの更新関数がすぐに実行され、コンポーネントのレンダリング関数が初めて実行され、 に変換されます。同時に、レンダリング関数を初めて実行すると、内部コンポーネント間の依存関係が作成されますpatch。応答データとコンポーネント更新関数。これにより、将来データが変更されたときに、対応する更新関数が実行されます。vnodedom
Vue テンプレートのコンパイル原則
Vue には と呼ばれる独自のコンパイラ モジュールがありcompiler、その主な機能は、templateユーザーが作成した関数をrenderjs の実行可能な関数にコンパイルすることです。Vue では、コンパイラーが最初にtemplate解析し、このステップが呼び出されparse、終了後に JS オブジェクトが取得され、それが と呼ばれます。次に、深い処理のための変換プロセスが抽象语法树ASTあり、このステップが と呼ばれ、最後に以前に取得したJS コードが呼び出されます。が生成される、つまり機能です。ASTtransformASTrender
Vue の応答性の原則
1. Vue 2 のデータ応答性は、データ型に応じて異なる方法で処理されます。オブジェクトの場合は、Object.defineProperty(obj,key,descriptor)オブジェクト属性へのアクセスをインターセプトすることで、データがアクセスまたは変更されると感知して反応します。配列の場合は、その 7 つの変更メソッド (プッシュ、ポップ、シフト、アンシフト、スプライス、ソート) を拡張します。 、逆）により、これらのメソッドは追加の更新通知を実行して応答できるようになります。欠点: * 初期化中の再帰的なトラバーサルによりパフォーマンスが低下します; * 通知更新プロセスでは多数のインスタンスを維持する必要がありdep、watcher追加のメモリを大量に消費します; * オブジェクト属性の追加または削除はインターセプトできないため、を渡しVue.set、deleteそのような API を有効にします; * これらのES6新しく生成されたデータ構造はサポートされていませんMap。2. Vue 3 で使用されるメカニズム プロキシには、応答性の高いデータが必要です。オブジェクトと配列を同時にサポートできます。動的な属性の追加と削除をインターセプトできます。すべての新しいデータ構造がサポートされています。オブジェクトのネストされた属性は実行時に再帰的であり、使用されるときのみプロキシされます。特に大規模な属性を維持する必要はありません。依存関係の数が減り、パフォーマンスが大幅に向上しました。大きな進歩です。SetES6Proxy
仮想 DOM
1. 概念: 仮想 DOM は、その名前が示すように、仮想 DOM オブジェクトであり、それ自体は JS オブジェクトですが、さまざまな属性を通じてビュー構造を記述します。2. 仮想 DOM の利点: (1) パフォーマンスの向上 DOM の直接操作には制限があります。実要素には多くの属性があります。直接操作すると、追加の属性内容も同時に操作されます。必要ではありません。これらの操作が JS オブジェクトに転送されると、はるかに簡単になります。さらに、DOM の操作には比較的コストがかかり、DOM 操作が頻繁に行われると、ページの再描画やリフローが簡単に発生する可能性があります。中間処理が抽象 VNode を通じて実行される場合、直接 DOM 操作の数が効果的に削減され、それによってページの再描画とリフローが削減されます。(2) クロスプラットフォームの実装に便利です。同じ VNode ノードを、異なるプラットフォーム上の対応するコンテンツにレンダリングできます。例: ブラウザーでレンダリングする場合は DOM 要素ノードであり、ネイティブ (iOS、iOS) でレンダリングする場合は、 Android）に対応したコントロールとなります。Vue 3 を使用すると、開発者は VNode に基づいてカスタム レンダラーを実装し、さまざまなプラットフォームでのレンダリングを容易にすることができます。3. 構造: 統一された規格はなく、通常tag、 、props、 の3 つの項目が含まれますchildren。tag：必須。これはラベルである場合もあれば、コンポーネントや関数である場合もあります。props: オプション。このラベルのプロパティとメソッドです。children: オプション。これは、このタグのコンテンツまたは子ノードです。テキスト ノードの場合は文字列、子ノードがある場合は配列です。つまり、children文字列であると判断された場合は、テキスト ノードである必要があり、このノードには子要素があってはなりません。### 差分アルゴリズム
1. 概念:diffこのアルゴリズムは比較アルゴリズムです。古い仮想 DOM と新しい仮想 DOM を比較することで、どの仮想ノードが変更されたかを知ることができます。この仮想ノードを見つけて、この仮想ノードに対応する実ノードのみを更新します。代わりに、この仮想ノードを見つけて、この仮想ノードに対応する実ノードのみを更新します。変更されていない他のノードを更新する際に、実際の DOM を正確に更新できるため、効率が向上します。2. 比較方法:diffアルゴリズムの全体的な戦略は次のとおりです深度优先，同层比较。比較は同じレベルでのみ実行され、レベル間では比較されません。比較プロセス中に、ループは両側から中央まで縮小します。
- まず、 2 つのノードが同じ
tagかどうかを確認し、異なる場合はノードを削除し、新しいノードを作成して置き換えます。 tag同一の場合は、属性を置換してから子要素を比較し、以下の場合に分けられます。 ※ 新旧ノードに子要素がある場合は、ダブルポインタ方式で比較します。新旧の先頭ポインタと末尾ポインタを比較し、ループを中間に近づけ、状況に応じて処理をpatchVnode繰り返し、 を呼び出して新しいノードを作成し、ハッシュテーブルから一貫性のあるノードを見つけて、次のように動作します。状況。※ 新しいノードに子要素があり、古いノードに子要素がない場合は、子要素の仮想ノードを実ノードに変換して挿入するだけです。* 新しいノードに子要素がなく、古いノードに子要素がある場合、子要素はクリアされ、新しいノードのテキスト コンテンツに設定されます。※新旧ノードともに子要素がない場合、つまり両方ともテキストノードの場合は、テキスト内容を直接比較し、異なる場合は更新します。patchcreateElemkeyVNode
Vue におけるキーの役割は何ですか?
key主な機能は です为了更加高效的更新虚拟 DOM。
Vue が 2 つのノードが同じかどうかを判断する場合、主に2 つのノードのkey合計を判断します元素类型tag。したがって、これが設定されていない場合key、その値は未定義であり、これらは常に 2 つの同一のノードであると見なされ、更新操作のみが実行できるため、多数の DOM 更新操作が発生します。
コンポーネント内のデータが関数なのはなぜですか?
new Vue() では、ルート インスタンスが 1 つしかなく、データ汚染が発生しないため、関数またはオブジェクトにすることができます。
コンポーネントでは、複数のコンポーネント インスタンス オブジェクトが同じデータを共有してデータ汚染を引き起こすことを防ぐために、データは関数である必要があります。関数の形式では、initData がファクトリ関数として使用される場合、新しいデータ オブジェクトが返されます。 。
Vue のコンポーネント間で通信するにはどうすればよいですか?
1. 親子コンポーネント通信: 親は子にデータを渡しprops、子はイベントをトリガーして親にデータを送信します$emit。通信は親チェーン/子チェーン ( $parent/ $children) を通じて行うこともできます。refコンポーネント インスタンスにもアクセスできます。 ; provide/ inject; $attrs/ $listeners。2. 兄弟コンポーネント間の通信: グローバル イベント バスEventBus、Vuex。3. クロスレベルコンポーネント通信: グローバルイベントバスEventBus、Vuex、provide/ inject。### v-show と v-if の違いは何ですか?
1. 異なる制御方法。v-showcss 属性を要素に追加するとdisplay: none、要素は引き続き存在しますが、v-if要素の表示または非表示を制御するには、要素全体を追加または削除します。
2. コンパイルプロセスが異なります。v-if切り替えには部分的なコンパイル/アンインストール プロセスがあり、切り替えプロセス中に、内部イベント リスナーとサブコンポーネントが適切に破棄され、再構築されます。これは単なるv-showCSS ベースの切り替えです。
3. コンパイル条件が異なります。v-ifこれは真の条件付きレンダリングです。条件付きブロック内のイベント リスナーとサブコンポーネントが切り替えプロセス中に適切に破棄され、再構築されることが保証されます。レンダリング条件が false の場合、true になるまで操作は実行されません。
4. トリガーのライフサイクルが異なります。v-showfalse から true に変更すると、コンポーネントのライフサイクルはトリガーされません。falsev-ifから true に変更すると、コンポーネントのフックがトリガーされ、 true から false に変更するbeforeCreateと、コンポーネントのフックがトリガーされます。5. 消費パフォーマンスが異なります。スイッチング コストが高く、初期レンダリング コストも高くなります。createdbeforeMountmountedbeforeDestorydestoryedv-ifv-show
使用シナリオ: アコーディオン メニュー、タブ ページなど、頻繁に切り替える必要がある場合は、v-show実行時に条件がほとんど変わらない場合は、次のように使用するのがよいでしょうv-if。ユーザーがログインすると、さまざまな権限に従って表示されます。 さまざまなコンテンツ。
計算と監視の違いは何ですか?
computed計算されたプロパティは、他のプロパティに依存して値を計算します。内部の依存関係が変更されると、関数が再実行されます。計算されたプロパティにはキャッシュがあります。計算されたプロパティが複数回再利用されると、戻り値はキャッシュから取得されます。プロパティにはキーワードが必要ですreturn。watch特定のデータの変更を検出して関数をトリガーします。deepデータがオブジェクト型の場合、オブジェクトの属性値が変更されたときにディープ リスニング属性を使用する必要があります。または、ページが最初に読み込まれるときに即時リスニング属性を使用することもできますimmdiate。
使用シナリオ: 計算されたプロパティは、通常、テンプレートのレンダリングで使用されます。特定の値は、他の応答オブジェクトまたは計算されたプロパティに依存します。リスニング プロパティは、特定の値の変化を観察して、複雑なビジネス ロジックを完成させるのに適しています。
v-if と v-for を一緒に使用することが推奨されないのはなぜですか?
Vue 2 ではv-for優先順位v-ifが高く、v-if各ループで個別に実行されることになりますv-for。走査される配列が大きく、表示される実際のデータが非常に小さい場合、パフォーマンスが大幅に無駄になります。
Vue 3 ではまったく逆で、v-if優先度が高いv-forため、v-if実行時に呼び出す変数はまだ存在せず、例外が発生します。
これには通常、次の 2 つの状況が考えられます。
- リスト内の項目をフィルタリングするには、次のようにします
v-for = "user in users" v-if = "user.active"。この場合、計算されたプロパティを定義して、フィルター処理されたリストを返すことができます。 - 非表示にする必要があるリストのレンダリングを回避するには、
v-for = "user in users" v-if = "showUsersFlag"たとえば、この場合、v-ifそれをコンテナ要素に移動するか、外側のレイヤーでラップすることができますtemplate。
Vue 2のメソッドを設定しますか?
setこれは Vue 2 のグローバル API です。レスポンシブ データを手動で追加すると、データ変更ビューが更新されない問題を解決できます。配列内の項目の値を直接設定するか、プロジェクト内のオブジェクトのプロパティの値を直接設定すると、ページが更新されないことがわかります。これは、Object.defineProperty()データの変更を監視できないという制限があるためですが、これはthis.$set(数组或对象，数组下标或对象的属性名，更新后的值)解決できます。
キープアライブとは何ですか?
- 機能: コンポーネントのキャッシュを実装し、コンポーネントのステータスを維持し、レンダリングの繰り返しによって引き起こされるパフォーマンスの問題を回避します。
- 動作原理: Vue.js は内部的に DOM ノードを VNode ノードに抽象化し、
keep-aliveコンポーネントのキャッシュも VNode ノードに基づいています。条件を満たすコンポーネントをキャッシュオブジェクトにキャッシュし、再レンダリング時にはキャッシュオブジェクトからVNodeノードを取り出してレンダリングします。 - 設定できる属性は以下の通りです: ①
include: 文字列または正規表現 名前が一致するコンポーネントのみがキャッシュされます。②exclude: 文字列または正規表現。名前が一致するコンポーネントはキャッシュされません。③max: 数値、キャッシュできるコンポーネント インスタンスの最大数。照合では、最初にコンポーネントのnameオプションがチェックされます。nameオプションが使用できない場合は、そのローカル登録名 (親コンポーネントのコンポーネント オプションのキー値) と照合されます。匿名コンポーネントは照合できません。
キャッシュが設定されたコンポーネントには、さらに 2 つのライフサイクル フック、 、keep-aliveがあります。初めてコンポーネントに入る場合: beforeCreate --> created --> beforeMount --> Mounted --> activate --> beforeUpdate --> updated --> deactivated コンポーネントに再度入る場合: activate --> beforeUpdate - -> 更新されました --> 非アクティブ化されましたactivateddeactivated
混入します
mixin(Mixin) は、Vue コンポーネントで再利用可能な機能を配布するための非常に柔軟な方法を提供します。
使用シナリオ: いくつかの同一または類似のコードが異なるコンポーネントで使用されることがよくあり、これらのコードの機能は比較的独立しています。同じまたは類似のコードは、ミックスインを通じて抽出できます。
欠点:
1. 変数のソースが不明瞭
2. 複数のミックスインにより名前の競合が発生する可能性がある (解決策: Vue 3 の組み合わせ API)
3. ミックスインとコンポーネントの間には多対多の関係があり、プロジェクトがより複雑になります。
スロット
slotスロットは通常、コンポーネント内で使用されます。コンポーネントをカプセル化するときに、コンポーネント内の位置にどのような形式の要素が表示されるかわからない場合は、この位置を占有できます。この位置の要素は、コンテンツの形式で渡す必要がありslotます親コンポーネントから。slotに分け：
默认插槽: サブコンポーネントは<slot>タグを使用してレンダリング位置を決定します。構造体をDOMバックアップ コンテンツとしてタグ内に配置できます。親コンポーネントの使用中に、コンテンツをサブコンポーネントのタグに直接書き込むことができます。コンテンツのこの部分は、<slot>サブコンポーネントのタグ位置。コンテンツをスロットに渡さずに親コンポーネントが使用される場合、バッキング コンテンツがページに表示されます。具名插槽: サブコンポーネントはname属性を使用してスロットの名前を表します。指定されたスロットがない場合はname、暗黙的な名前が存在しますdefault。親コンポーネントで使用される場合、v-slotディレクティブは、デフォルトのスロットに基づいて要素をどのスロットに配置する必要があるかを指定します。値はv-slot子コンポーネントのスロットname属性値です。命令を使用してv-slot要素を配置するスロットを指定するには<template>、その要素と一致する必要があり、<template>要素は 1 つの予約スロットにのみ対応できます。つまり、複数の<template>要素がv-slot命令を使用して同じスロットを指定することはできません。v-slotの省略形は#、たとえば、v-slot:headerと省略できます#header。作用域插槽: サブコンポーネントはラベル上のデータを<slot>バインドして、サブコンポーネントのデータを親コンポーネントに渡して使用できるようにします。props親コンポーネントがスロットにバインドされた props データを取得するメソッド: 1.scope="受信した変数名":<template scope="接收的变量名">2.slot-scope="受信した変数名":<template slot-scope="接收的变量名">3.v-slot: スロット名="受信した変数名":<template v-slot:插槽名="接收的变量名">
Vue の修飾子とは何ですか?
Vue では、修飾子が DOM イベントの多くの詳細を処理するため、これらの面倒な処理に多くの時間を費やす必要がなくなり、より多くのエネルギーをプログラムの論理処理に集中できるようになります。Vue のモディファイアは次のタイプに分類されます。
1. フォーム修飾子lazy情報を入力した後、カーソルがラベルから離れたときにのみ値が value に割り当てられます。つまり、change情報はイベント後に同期されます。numberユーザー入力値を数値型に自動的に変換しますが、値がparseFloat解析できない場合は元の値が返されます。trimユーザーが入力した最初と最後のスペースは自動的にフィルターされますが、中間のスペースはフィルターされません。
2. イベント修飾子は、stopイベントのバブリングを防ぎます。これはevent.stopPropagationメソッドの呼び出しと同じです。preventイベントのデフォルトの動作を防ぐことは、event.preventDefaultメソッドを呼び出すことと同じです。ハンドラー関数は、 が現在の要素自体である場合にselfのみトリガーされます。イベントをバインドした後は 1 回のみトリガーでき、2 回目はトリガーされません。イベント キャプチャ モードを使用します。つまり、要素自体によってトリガーされたイベントが最初にここで処理され、次に内部要素に渡されて処理されます。イベントのデフォルトの動作をブロックしたくないことをブラウザーに伝えます。コンポーネントが組み込みタグのようなルート要素のネイティブ イベントをリッスンできるようにします。そうでない場合、コンポーネントはカスタム イベントのみをリッスンします。3. マウス ボタン モディファイアを左クリックします。右クリック。中クリックします。4. キー値修飾子 キーボード修飾子は、次のようにキーボード イベント ( 、 ) を変更するために使用されます。たくさんありますが、エイリアスが提供されます。エイリアスは、次の 2 つのタイプに分けられます。 * 通常のキー (Enter、Tab、Delite、 space、esc、up...) * システム修飾キー (ctrl、alt、meta、shift...)event.targetoncecapturepassivenativehtmlv-onleftrightmiddleonkeyuponkeydownkeyCodevue
SPAについてどのように理解していますか？
1. 概念: SPA（Single-page application）、つまり、現在のページを動的に書き換えることによってユーザーと対話するネットワーク アプリケーションまたは Web サイトのモデルであるシングル ページ アプリケーション。この方法により、ページ間の切り替え時にユーザー エクスペリエンスが中断されることが回避されます。ではSPA、必要なすべてのコード（HTML、JavaScript、CSS）が単一ページのロードで取得されるか、適切なリソースが動的にロードされ、必要に応じて（通常はユーザーのアクションに応じて）ページに追加されます。ページはどの時点でもリロードされず、制御が他のページに転送されることもありません。例えば、カップのように、朝はミルク、昼はコーヒー、午後は紅茶が入っていて、常に中身が入っていてカップは変化しません。2.SPAの違いMPA: MPA（Muti-page application）、つまり複数ページのアプリケーション。ではMPA、各ページはメイン ページであり独立しています。ページにアクセスするたびに、Html、CSS、および JS ファイルを再ロードする必要があり、パブリック ファイルは必要に応じてオンデマンドでロードされます。|| SPA | MPA || — | — | — || 構成 | 1 つのメイン ページと複数のページ フラグメント | 複数のメイン ページ || URL モード | ハッシュ モード | 履歴モード || SEO 検索エンジンの最適化 | 達成は困難ですが、可能ですSSR メソッドを使用して改善する | 実装が簡単 | | データ転送 | 簡単 | URL、Cookie、localStorage などを経由する | | ページ切り替え | 高速、優れたユーザー エクスペリエンス | 読み込みリソースの切り替え、低速、ユーザー エクスペリエンスが悪い | |メンテナンス コスト | 比較的簡単 | 比較的複雑 | 3.SPA長所と短所: 長所: * デスクトップ アプリケーションの即時性、Web サイトの移植性とアクセシビリティがある * 優れた高速なユーザー エクスペリエンス、コンテンツの変更でページ全体をリロードする必要がない * 前と後の良いエンドツーエンドの分離後、より明確な分業 欠点: * 検索エンジンのクロールに役立たない * 最初のレンダリング速度が比較的遅い ### 双方向バインディング?
1. 概念: Vue の双方向バインディングは、v-model応答データをビューにバインドできる命令であり、ビュー内の変更によって値が変更される可能性があります。v-modelこれは、デフォルトの:valueと同等の構文シュガーであり、@inputこれを使用すると、v-model多くの面倒なイベント処理コードを削減し、開発効率を向上させることができます。
2. 使用法: 通常はフォーム項目で使用されますv-modelが、特定の値の入力および出力コントロールを表すカスタム コンポーネントでも使用できます。
3. 原則:v-modelこれは命令です. 双方向バインディングは実際には Vue コンパイラによって完了します.v-modelテンプレートを含むコンポーネント描画関数を出力することで, 実際にはvalueプロパティとイベント監視のバインディングにinputなります. 対応する変数はイベントコールバック関数、更新操作。
子コンポーネントは親コンポーネントのデータを直接変更できますか?
1. すべてはprop単一のバインディング原則に従い、props親コンポーネントの更新によって変更され、新しい状態を逆方向に渡すことなく、子コンポーネントに自然に下方に流します。これにより、子コンポーネントが親コンポーネントの状態を誤って変更することが防止されます。変更しないと、アプリケーションのデータ フローが混乱し、理解が困難になりやすくなります。さらに、親コンポーネントが更新されるたびに、すべての子コンポーネントがprops最新の値に更新されるため、子コンポーネントの 1 つを変更しないでくださいprop。変更すると、Vue はコンソールに警告をスローします。
2. 実際の開発プロセスでは、通常、変更が必要な 2 つのシナリオがありますprop。*propは初期値を渡すために使用され、サブコンポーネントは後でそれをローカル データ属性として使用したいと考えています。この場合、新しいローカル データ属性を定義し、propsから初期値を取得することが最善です。prop* 渡された値に対してさらに変換が必要です。この値に基づいてprop計算プロパティを定義することをお勧めします。
3. 実際には、親コンポーネントのプロパティを実際に変更したい場合は、emitイベントを使用して親コンポーネントを変更する必要があります。オブジェクトまたは配列propsがコンポーネントとして渡される場合、子コンポーネントはpropsバインディングを変更できませんが、オブジェクトまたは配列内の値を変更することはできます。これは、JS のオブジェクトや配列が参照渡しされるためであり、Vue の場合、そのような変更を禁止することは可能ですが、大幅なパフォーマンスの低下が発生し、利益の方が大きいためです。
Vue Router の一般的なルーティング モードと原則?
1. ハッシュ モード: location.hash* の値は、URL の # に続くものです。その特徴は、ハッシュは URL に表示されますが、HTTP リクエストには含まれず、バックエンドにはまったく影響を与えないため、ハッシュを変更してもページはリロードされません。
- ハッシュの変更をリッスンするイベントを追加できます
window.addEventListener("hashchange", funcRef, false)。各変更がhash (window.location.hash)ブラウザのアクセス履歴にレコードを追加します。ハッシュの上記の特性を利用して、ページを再リクエストせずにビューを更新するフロントエンド ルーティングの機能を実装できます。特徴: 互換性は良いが美しくはない 2. 履歴モード: HTML5 履歴インターフェイスの新しいメソッドpushState()とメソッドを使用します。これら 2 つのメソッドはブラウザの履歴スタックに適用され、現在存在する、、およびreplaceState()に基づいて履歴レコードを変更する機能を提供します。これら 2 つのメソッドには共通点があります。ブラウザ履歴スタックを変更するために呼び出された場合、現在の URL が変更されていても、ブラウザはページを更新しません。これは、シングルページ アプリケーションのフロントエンド ルーティングが「URL を更新する」ことを意味します。基本的な機能を提供します。美しいですが、更新すると 404 が表示され、バックエンド構成が必要です。backforwardgo
動的ルーティング?
特定の一致パターンのルートを同じコンポーネントにマップする必要がある場合が多く、この場合は動的ルーティングを定義する必要があります。たとえば、異なる ID を持つすべてのユーザーをレンダリングするために使用する必要がある User コンポーネントがあります。次に、これを vue-router のルーティング パスで使用して、动态路径参数（dynamic segment）次の効果を実現できます。{path: '/user/:id', compenent: User}これは:id動的パス パラメーターです。
Vuex について理解していますか?
1. 概念: Vuex は Vue 専用の状態管理ライブラリであり、アプリケーションの状態をグローバルに一元管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。2. 解決された問題: Vuex が解決する主な問題は、複数のコンポーネント間の状態共有です。状態共有はさまざまな通信方法を使用して実現することもできますが、多くの場合、複数のコンポーネント間で状態の一貫性を維持する必要があるため、このモデルでは問題が発生しやすく、プログラム ロジックが複雑になります。Vuex は、コンポーネントの共有状態を抽出し、グローバル シングルトン モードで管理するため、どのコンポーネントでも一貫した方法で状態を取得および変更できます。また、レスポンシブ データにより、シンプルな一方向フローが保証され、コードがより効率的になります。メンテナンスが簡単です。3. いつ使用するか: Vuex は状態を管理できますが、必要ありませんが、より多くの概念とフレームワークももたらします。大規模な単一ページ アプリケーションを開発する予定がない場合、またはアプリケーション内で維持するグローバル状態が大量にない場合は、Vuex を使用する必要はなく、単純なストア モードで十分です。それ以外の場合は、Vuex を選択するのが自然でしょう。
4. 使用法: Vuex はグローバル状態をstateオブジェクトに置きますが、オブジェクト自体は状態ツリーです。コンポーネントはstoreインスタンスを使用しstateてこれらの状態にアクセスし、サポート メソッドを使用してこれらの状態を変更します。状態を変更してコンポーネント内で呼び出すことmutationのみが可能です。mutationメソッドcommitの送信mutation。アプリケーションに非同期操作または複雑なロジックの組み合わせがある場合は、それらを記述する必要がありますaction。実行後、状態の変更がある場合は、引き続き送信する必要がありmutation、コンポーネントはdispatchディスパッチされますaction。最後に、モジュール化は、オプションを使用して分割されたサブモジュールを整理するために使用されますmodules。状態にアクセスするときは、サブモジュールの名前の追加に注意する必要があります。サブモジュールに設定がある場合は、送信時に追加の名前空間プレフィックスが必要namespaceです。mutationそして発送します。action
ページ更新後の Vuex 状態損失の問題を解決するにはどうすればよいですか?
Vuex は状態をメモリに保存するだけで、リフレッシュすると状態が失われるため、永続化したい場合は保存する必要があります。
localStoragemutation送信と同時に保存できlocalStorage、その値を初期値storeとして取り出すこともできるので非常に便利です。state
サードパーティのプラグインを使用することもできます。プラグインの使用をお勧めしますvuex-persist。これは、Vuex 永続ストレージ用のプラグインです。手動でアクセスする必要はありませんがstorage、状態をcookieまたはに直接保存しますlocalStorage。
Vue SSRって分かりますか？
SSRつまり服务端渲染（Server Side Render）、Vue がクライアント上でタグを HTML にレンダリングする作業はサーバー上で実行され、HTML はクライアントに直接返されます。
- 利点: SEO が向上し、最初の画面の読み込みが速くなります。
- 短所: 開発条件が制限される サーバーサイドレンダリングは、beforeCreate と created の 2 つのフックのみをサポートする 外部拡張ライブラリが必要な場合、特別な処理が必要になる サーバーサイドレンダリングアプリケーションも Node.js 実行環境にある必要がある。サーバーにはより大きな負荷要件が必要になります。
Vue についてどのようなパフォーマンス最適化方法を知っていますか?
- ルートは遅延してロードされます。アプリケーションのサイズを効果的に分割し、アクセス時に非同期でロードします。
keep-aliveページをキャッシュします。コンポーネント インスタンスの重複作成を回避し、キャッシュされたコンポーネントの状態を保持します。v-forトラバーサルにより、同時使用が回避されますv-if。実際、Vue 3 ではすでに間違った使用法になっています。- ロングリストのパフォーマンス最適化、仮想リストを使用できます。
v-once。データ使用量は変更されなくなりましたv-once。- イベントは破壊されます。コンポーネントが破棄されると、グローバル変数とタイマーも破棄されます。
- 写真は遅延して読み込まれます。
- サードパーティのプラグインはオンデマンドで導入されます。
- サブコンポーネントの分割。より重い状態のコンポーネントは分割に適しています。
- サーバー側のレンダリング。
やっと
皆様向けにフロントエンド情報パッケージをご用意しました。54冊、2.57Gのフロントエンド関連の電子ブック、「フロントエンドインタビューガイド（回答と分析付き）」、難解で重要な知識に関するビデオチュートリアル（フルセット）が含まれています。
必要な友達は下のカードをクリックして受け取り、無料で共有できます