1. インタビュアー: MVVM について簡単に説明してください。
MVVMとはModel-View-ViewModelのことで、MVCのControllerをViewModelに進化させたものです。モデル レイヤーはデータ モデルを表し、ビューは UI コンポーネントを表し、ViewModel はビュー レイヤーとモデル レイヤー間のブリッジです。データは viewModel レイヤーにバインドされ、自動的にデータをページにレンダリングします。ビューが変更されると、 、データを更新するように viewModel レイヤーに通知されます。以前は、DOM 構造を操作してビューを更新していましたが、現在はデータ駆動型のビューになっています。
MVVM の利点:
1. 低結合。ビュー (View) はモデルとは独立して変更および修正できます。モデルは別のビューにバインドできます。ビューが変更されてもモデルは変更されず、モデルが変更されてもビューも変更されません。
2. 再利用性。モデルにいくつかのビュー ロジックを配置し、多くのビューでこのビュー ロジックを再利用することができます。
3. 独立した開発。開発者はビジネス ロジックとデータ開発 (ViewModel) に集中でき、デザイナーはページのデザインに集中できます。
4. テスト可能。
2. インタビュアー: vue のライフサイクルについてのあなたの理解を説明してください。作成されたライフサイクルとマウントされたライフサイクルでのデータのリクエストの違いは何ですか?
各 Vue インスタンスは、作成時に一連の初期化プロセスを実行します。Vue のライフ サイクル フックは、特定の段階または条件に達したときにトリガーされる関数です。その目的は、いくつかのアクションまたはイベントを完了することです。
Vue のライフ サイクルは、作成前後、読み込み前後、更新前後、破棄前後、および一部の特別なシナリオのライフ サイクルの合計 8 段階に分けることができます。
ライフサイクル |
説明 |
作成前 |
コンポーネント インスタンスが作成されるとき、データとメソッド内のデータは初期化されていないため、vm からアクセスできません。 |
作成した |
コンポーネント インスタンスは完全に作成されており、データに値があり、マウントされておらず、vm からアクセスできます。 |
マウント前 |
コンポーネントがマウントされる前に、ページには Vue によってコンパイルされていない DOM 構造が表示され、データをフェッチできます。 |
取り付け済み |
コンポーネントがインスタンスにマウントされると、この時点で DOM を操作できるようになり、ページには Vue によってコンパイルされた DOM 構造が表示されます。 |
更新前 |
コンポーネントのデータが変更され、更新前はデータは新しいですが、ページは古いです。 |
更新しました |
コンポーネント データが更新された後、ページとデータは同期されます。 |
前に破壊する |
コンポーネント インスタンスが破棄される前に、現時点で一部のメソッドを手動で破棄できます。 |
破壊されました |
コンポーネントインスタンスが破棄された後 |
アクティブ化された |
キープアライブキャッシュコンポーネントがアクティブ化されたとき |
無効化された |
キープアライブ キャッシュされたコンポーネントが非アクティブ化されたときに呼び出されます |
エラーがキャプチャされました |
子孫コンポーネントからのエラーが捕捉されたときに呼び出されます |
余談: 作成されたデータリクエストとマウントされたデータリクエストの違い
created はコンポーネント インスタンスの作成直後に呼び出され、この時点ではページ dom ノードは生成されません。mount はページ dom ノードがレンダリングされた直後に実行されます。トリガタイミングとしてはCreatedの方がMountよりも早く、インスタンスオブジェクトのプロパティやメソッドを取得できる点は同じです。この問題を議論する本質は、トリガーのタイミングです。mounted に置かれたリクエストにより、ページがフラッシュされる可能性があります (この時点でページ dom 構造が生成されているため)。しかし、ページがロードされる前にリクエストが完了した場合、これは起こらないでしょう。ページコンテンツへの変更は、作成されたライフサイクルに配置することをお勧めします。
3. インタビュアー: SPA 1 ページについてのあなたの理解
シングルページ アプリケーション SPA は、現在のページを動的に書き換えることによってユーザーと対話する Web アプリケーションまたは Web サイトのモデルです。この方法により、ユーザー エクスペリエンスを中断するページ間の切り替えが回避されます。シングルページ アプリケーションでは、必要なすべてのコード (HTML、JavaScript、CSS) が単一ページのロードで取得されるか、適切なリソースが動的にロードされ、必要に応じて (通常はユーザーのアクションに応じて) ページに追加されます。いつでもページをポイントはリロードせず、制御を他のページに転送しません。
React、vue、angular などの有名な JS フレームワークはすべて SPA に属します
4. インタビュアー: v-show と v-if の違いは何ですか? どのような使用シナリオがありますか?
vue では、v-show と v-if は同じ効果があり、どちらも要素をページに表示するかどうかを制御できます。
式が true の場合はページの位置を占め、式が false の場合はページの位置を占めません。
違い：
1. V-show の非表示は、css--display:none を要素に追加することであり、dom 要素はそのまま残ります。v-if show Hide が dom 要素全体を追加または削除する場合
2. v-if スイッチングには部分的なコンパイル/アンロード プロセスがあり、その間に内部イベント リスナーとサブコンポーネントが適切に破棄および再構築されます。v-show は単なる CSS ベースのスイッチングです。
3. v-show が false から true に変化すると、コンポーネントのライフサイクルはトリガーされません。
v-if が false から true に変更されると、コンポーネントの beforeCreate、create、beforeMount、マウントされたフックがトリガーされ、true から false に変更されるとコンポーネントの beforeDestory および destroy メソッドがトリガーされます。
パフォーマンスの消費: v-if はスイッチング消費が高く、v-show は初期レンダリング消費が高くなります。
v-show と v-if の使用シナリオ
頻繁に切り替える必要がある場合は、v-show を使用することをお勧めします。
実行時に条件がほとんど変化しない場合は、v-if を使用することをお勧めします。
5. インタビュアー: Vue インスタンスのマウントのプロセス
1. 新しい Vue を呼び出すと、_init メソッドが呼び出されます。
$set、$get、$delete、$watch およびその他のメソッドを定義する
$on、$off、$emit、$off およびその他のイベントを定義する
_update、$forceUpdate、$destroy ライフ サイクルを定義する
2. $mount を呼び出してページをマウントします
3. マウントするときは、主に mountComponent メソッドを使用します。
4. updateComponent更新関数を定義する
5. レンダリングを実行して仮想 DOM を生成する
6. update は仮想 DOM から実際の DOM 構造を生成し、それをページにレンダリングします。
6. インタビュアー: v-if と v-for の優先順位は何ですか?
v-if ディレクティブは、コンテンツを条件付きでレンダリングするために使用されます。このコンテンツは、ディレクティブの式が true を返した場合にのみ表示されます。
v-for ディレクティブは、配列に基づいてリストをレンダリングします。v-for ディレクティブには、item in items という形式の特別な構文が必要です。items はソース データ配列またはオブジェクト、item は反復される配列要素のエイリアスです。
v-for を使用する場合は、キー値を設定し、各キー値が一意であることを確認することをお勧めします。これにより、diff アルゴリズムの最適化が容易になります。
1. v-for と v-if が同じノード内にある場合、v-for の優先順位は v-if よりも高くなります。これは、 v-if が各 v-for ループで繰り返し実行されることを意味します。走査される配列が非常に大きいが、表示される実際のデータが非常に小さい場合、パフォーマンスの大幅な無駄が発生します (Vue2.x)
2. このシナリオでは computed を使用し、最初にデータをフィルター処理することをお勧めします。
7. インタビュアー: コンポーネント内のデータはなぜ関数なのでしょうか?
1. コンポーネントが複数回再利用されると、複数のインスタンスが作成されます。基本的に、これらのインスタンスはすべて同じコンストラクターを使用します。
2. データがオブジェクトの場合、そのオブジェクトは参照型であるため、すべてのインスタンスに影響を及ぼし、データ汚染を引き起こします。したがって、コンポーネントの異なるインスタンス間でデータが競合しないようにするには、データは関数である必要があります。
8. インタビュアー: 新しい属性が Vue のデータに動的に追加されるとどうなりますか? どうやって解決すればいいでしょうか？
属性データは直接追加されますが、ページは更新されません
vue2 は Object.defineProperty を使用してデータ応答性を実装するため、データにアクセスまたは設定するときにセッターとゲッターをトリガーできますが、新しいプロパティを obj に追加するときにイベント プロパティのインターセプトをトリガーすることはできません。
その理由は、obj の古いプロパティは最初に応答データとして設定されていましたが、新しく追加されたプロパティは Object.defineProperty を通じて応答データとして設定されていなかったためです。
解決：
データとビューを同期して更新する場合は、次の 3 つのソリューションを採用できます。
Vue.set() //Vue.set( target, propertyName, value )
Object.assign() //创建一个新的对象，合并原对象和混入对象的属性
$forcecUpdated() //在Vue中做一次强制更新9. インタビュアー: Vue のコンポーネントとプラグインの違いは何ですか?
コンポーネントとは、グラフィックスや非グラフィックスなどのさまざまなロジックを統一概念（コンポーネント）に抽象化して開発を実現するパターンのことで、Vue では .vue ファイルひとつひとつをコンポーネントとみなすことができます。
プラグインは、 Vue にグローバル機能を追加するためによく使用されます。
2 つの違いは主に次の点に現れます。
1. 記入フォーム 2. 登録フォーム 3. 利用シーン
記述形式: コンポーネントの記述形式は、<template><script><style> の Vue 単一ファイル形式です。
vue プラグインの実装では、インストール メソッドを公開する必要があります。このメソッドの最初のパラメータは Vue コンストラクタで、2 番目のパラメータはオプションのオプション オブジェクトです。
登録フォーム: Vue コンポーネントの登録は主にグローバル登録とローカル登録に分かれており、プラグインの登録は Vue.use() を通じて登録されます。
使用するシーン
コンポーネントはアプリを構成するために使用されるビジネス モジュールであり、そのターゲットは App.vue です。
プラグイン (Plugin) はテクノロジー スタックを強化するために使用される機能モジュールであり、その目標は Vue 自体です
簡単に言えば、プラグインは Vue の機能を拡張または補足するものです。
10. インタビュアー: 双方向データ バインディングとは何ですか
一方向バインディング:モデルをビューにバインドします。JavaScript コードでモデルを更新すると、ビューは自動的に更新されます。したがって、追加の DOM 操作を実行する必要はなく、モデル操作を実行するだけでビューのリンク更新を実現できます。(v-バインド形式)
双方向バインディング:モデルをビューにバインドすると、ビューもモデルにバインドされるため、モデルの更新によってビューの自動更新が実現でき、ビューの更新によってモデル データの更新も実現できます。 。したがって、JavaScript コードでモデルを更新するとビューも自動的に更新され、逆にユーザーがビューを更新するとモデルのデータも自動的に更新されます。(v-model形式)
主に ViewModel のリスナーとパーサーに依存して双方向のデータ バインディングを実現します
11. インタビュアー: Vue コンポーネント間の通信方法は何ですか?
vue の 8 つの一般的な通信スキーム:
1. props スルー (親コンポーネントから子コンポーネントへ)
親コンポーネントは、<son:msg="msgData" ></son> などの子コンポーネント タグのリテラル値を介して値を渡します。
サブコンポーネントは、親コンポーネントによって渡されるパラメーターを定義するために props 属性を設定します。小道具など: ["msg"]
2. $emit を通じてカスタム イベントをトリガーします (子コンポーネントが親コンポーネントに渡されます)。
サブコンポーネントは $emit を通じてカスタム イベントをトリガーします。$emit の 2 番目のパラメーターは渡された値です。
this.$emit('add',good) // 親コンポーネントのメソッドをトリガーし、パラメータ Good を渡します
親コンポーネントはリスナーをバインドして、子コンポーネントから渡されたパラメータを取得します。
<Children@add="cartAdd($event)" />
3. ref (子コンポーネントから親コンポーネントへ) を使用します。
親コンポーネントは子コンポーネントを使用するときに ref を設定します
親コンポーネントは、子コンポーネントの ref を設定することでデータを取得します。
<Childrenref="foo" />
this.$refs.foo // サブコンポーネント インスタンスを取得します。サブコンポーネント インスタンスを通じて対応するデータを取得できます。
4. グローバルイベントバス（親子コンポーネント、非親子コンポーネント）
EventBus イベント バスは、親子コンポーネント、親子コンポーネント以外のコンポーネント間の通信に適しています。
グローバル イベント バス EventBus を作成する
送信コンポーネントは $emit を通じてカスタム イベントをトリガーし、$emit の 2 番目のパラメータは渡された値です。
受信コンポーネントは $on を通じてカスタム イベントをリッスンします。
5. 依存関係の注入（提供/注入）（親子コンポーネント、祖父母と孫コンポーネント）
祖先コンポーネントでprovide属性を定義し、渡された値を返します。
子孫コンポーネントでは、inject を通じてコンポーネントによって渡された値を受け取ります。
6、vuex
Vuex は一方向のデータ フローを実装しており、データをグローバルに保存するステートを持っています。コンポーネントがステート内のデータを変更したい場合は、ミューテーションを通じて行う必要があります。ミューテーションは、外部プラグインが呼び出すためのサブスクライバー モードも提供します状態データの更新を取得します。ただし、すべての非同期操作 (通常、バックエンド インターフェイスを呼び出して更新データを非同期的に取得するために使用されます) またはバッチ同期操作でアクションが必要な場合、アクションは状態を直接変更できず、状態データを変更するにはミューテーションが必要になります。最後にStateの変化に応じてビューにレンダリングします。
7、$parent/ $children
$parent を使用して、コンポーネントが親コンポーネントのインスタンスにアクセスできるようにします。
$children を使用して、コンポーネントが子コンポーネントのインスタンスにアクセスできるようにします。
8、$attrs/ $listeners
適用可能なシナリオ: 祖先が子孫にデータを渡す
バッチ ダウンロード属性 $attrs および $listeners を設定する
親スコープ内のプロパティとして認識 (およびフェッチ) されないプロパティ バインディングが含まれています。
内部コンポーネントは v-bind="$attrs" 経由で渡すことができます。
12. インタビュアー: Vue の $nextTick の機能は何ですか?
Vue の dom 更新は非同期であり、データ変更直後に dom を変更するのではなく、同一イベントループ内のデータ変更がすべて完了した後にビューを一律に更新します。
$nextTick() で使用されるシナリオ:
作成されたステージの dom はレンダリング用に生成されません。現時点でこのライフサイクルで dom を取得したい場合は、 nextTick メソッドを使用して取得できます。
マウントされたフェーズでは、レンダリングされたビューを操作する必要がある場合は、nextTick メソッドを使用します。これは、マウントされたフックはそのサブコンポーネントもマウントされることを保証していないためです。
$nextTick() の原理とその使用法
次の DOM 更新サイクルが終わるまでコールバックの実行を遅らせます。データを変更した後はすぐに使用し、DOM が更新されるまで待ちます。これはグローバル メソッド Vue.nextTick と同じですが、コールバックの this がそれを呼び出したインスタンスに自動的にバインドされる点が異なります。
13. インタビュアー: Vue の mixin についての理解を教えてください。アプリケーション シナリオは何ですか?
mixin (ミックスイン) は、Vue コンポーネントで再利用可能な関数を配布するための非常に柔軟な方法を提供します。
本質は実際には js オブジェクトであり、データ、コンポーネント、メソッド、作成済み、計算済みなどのコンポーネント内の任意の機能オプションを含めることができます。
共有関数をオブジェクトの形式で mixins オプションに渡すだけでよく、コンポーネントが mixins オブジェクトを使用すると、mixins オブジェクトのすべてのオプションがコンポーネント自体のオプションに混合されます。
Vue では、ローカルおよびグローバルに混在させることができます
14. インタビュアー: スロットについてのあなたの理解について教えてください。スロットの使用シーンは何ですか?
vue のスロットは非常に便利です。スロットは単なるプレースホルダーです。vue には 3 種類のスロットがあります。1 つはデフォルトのスロット (匿名)、もう 1 つは名前付きスロット、もう 1 つはスコープ付きスロットです。 、デフォルトのスロットがここに入力されている限り、匿名スロットには名前がありません。名前付きスロットは名前付きのスロットを指します。スコープ付きスロットの違いは、サブコンポーネントがスコープ付きスロットをレンダリングするときに、子コンポーネント内のデータを子コンポーネントに渡すことができることです。親コンポーネントに渡し、子コンポーネントから渡されたデータに基づいてスロットをレンダリングする方法を親コンポーネントに決定させます。
子コンポーネントは <slot> タグを使用してレンダリングする場所を決定し、親コンポーネントは
ユーザーはスロットを通じてコンポーネントを拡張し、コンポーネントの再利用やカスタマイズを改善できます。
15. インタビュアー: Vue.observable を理解したことがありますか? 教えて
Observable を翻訳すると、Observable と理解できます。
Vue での定義:
Vue.observable、オブジェクトを応答性の高いデータにします。Vue はそれを内部で使用して、データ関数によって返されたオブジェクトを処理します。
返されたオブジェクトはレンダリング関数や計算されたプロパティで直接使用でき、変更が発生すると対応する更新がトリガーされます。最小限のコンポーネント間の状態ストアとしても使用可能
Vue 2.x では、渡されたオブジェクトは、返されたオブジェクトと同じオブジェクトである Vue.observable によって直接変更されます。
使用するシーン
親子以外のコンポーネント間で通信する場合は、通常のバスを使うかvuexを使う方法がありますが、実装されている機能はそれほど複雑ではなく、上記2つを使うのは少々面倒です。現時点では、observable が良い選択です
16. インタビュアー: Vue のキーの原理をご存知ですか? それについてのあなたの理解を話す
このキーの機能は、差分アルゴリズムの実行時に対応するノードをより速く見つけ、差分速度を向上させ、仮想 DOM をより効率的に更新することです。
vue と React はどちらも diff アルゴリズムを使用して古い仮想ノードと新しい仮想ノードを比較し、ノードを更新します。Vue の diff 関数では、古いノード配列内のキーが新しいノードのキーと比較され、対応する古いノードが見つかります。見つからない場合は、新しいノードとみなされます。キーがない場合は、トラバーサル検索によって対応する古いノードが見つかります。1 つはマップ マッピングで、もう 1 つはトラバーサル検索です。比較において。地図のマッピングが高速になります。
17. インタビュアー: キープアライブについてどのように理解しているか教えてください。
keep-alive は vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。動的コンポーネントをキープアライブでラップすると、非アクティブなコンポーネントのインスタンスが破棄されずにキャッシュされます。
<keep-alive>
<component ></component>
</keep-alive>シナリオ: 一部のシナリオではページをリロードする必要がない場合にキープアライブを使用できます。
タブ タブ ページのバックグラウンド ナビゲーション、Vue パフォーマンスの最適化など
原則: Vue.js は内部的に DOM ノードを個々の VNode ノードに抽象化し、キープアライブ コンポーネントのキャッシュも DOM 構造を直接保存するのではなく VNode ノードに基づいています。条件 (pruneCache と pruneCache) を満たすコンポーネントをキャッシュ オブジェクトにキャッシュし、再レンダリングが必要なときにキャッシュ オブジェクトから vnode ノードを取り出してレンダリングします。
18. インタビュアー: Vue で一般的に使用される修飾子は何ですか? アプリケーションシナリオとは何ですか
Vue のモディファイアは次の 5 種類に分類されます。
1. フォーム修飾子 2、イベント修飾子 3、マウス ボタン修飾子 4、キー値修飾子 5、v-bind 修飾子
1. フォーム修飾子
Lazy:情報を入力し、カーソルがラベルから離れると、値が value (v-model.lazy) に割り当てられます。
トリム:ユーザーが入力した最初のスペース文字を自動的にフィルタリングします。中央のスペースはフィルタリングされません (v-model.trim)
number:ユーザーの入力値を数値型 (v-model.number) に自動的に変換します。
2. イベント修飾子
stop: イベントのバブリングを防ぎます。これは、event.stopPropagation メソッド (@click.stop) を呼び出すことと同じです。
Prevent: イベントのデフォルト動作を防止します。これは、event.preventDefault メソッド (@.prevent) を呼び出すことと同じです。
self:event.target が現在の要素自体である場合にのみハンドラーをトリガーします (@click.self)
Once: イベントがバインドされた後、イベントは 1 回だけトリガーされ、2 回目はトリガーされません (@click.once)
Capture: イベント トリガーをこの要素を含む最上位レベルから下にトリガーします。
パッシブ: モバイル側では、要素のスクロール イベントをリッスンしているときに、onscroll イベントが常にトリガーされ、Web ページがスタックしてしまうため、この修飾子を使用すると、onscroll に .lazy 修飾子を追加するのと同じになります。イベント
ネイティブ: コンポーネントが組み込み HTML タグのようにルート要素のネイティブ イベントをリッスンできるようにします。そうでない場合、コンポーネントの v-on はカスタム イベントのみをリッスンします。
3. マウスボタン修飾子
左 左クリック 右 右クリック 中 中クリックの例 (@click.left)
4. キーボード修飾子
キーボード修飾子は、キーボード イベント (onkeyup、onkeydown) を変更するために使用されます (@keyup.keyCode)
5、v-bind修飾子
v-bind 修飾子は主に属性を操作するために使用され、コロンとして省略されます。
19. インタビュアー: カスタム命令を書いたことがありますか? カスタムコマンドの適用シナリオは何ですか?
コア関数のデフォルトの組み込み命令 (v-model および v-show) に加えて、Vue ではカスタム命令の登録も可能です。グローバル登録は主に Vue.directive メソッドを介して行われます。Vue.directive の最初のパラメータ命令の名前です (v-prefix を記述する必要はありません)。2 番目のパラメータはオブジェクト データまたは命令関数です。
コンポーネントオプションオプションでディレクティブ属性を設定することによる部分的な登録
//注册一个全局自定义指令 `v-focus`
Vue.directive('focus',{
// 当被绑定的元素插入到DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
})
directives:{ //局部注册
focus: {
// 指令的定义
inserted: function (el) {
el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
}
}
}その後、テンプレート内の任意の要素に新しい v-focus を使用できるようになります。
アプリケーションシナリオ
1. フォームの重複送信を防止 2. 画像の遅延読み込み 3. ワンクリックコピー機能
20. インタビュアー: Vue のフィルターについて理解していますか? フィルターの適用シナリオは何ですか?
フィルターは本質的に元のデータを変更するのではなく、データを処理し、呼び出して処理する前にフィルターされたデータを返すだけであり、純粋な関数として理解することもできます。
vue のフィルターは 2 つの場所で使用できます: 二重中括弧補間と v-bind 式。フィルターは「パイプ」記号で示される JavaScript 式の最後に追加する必要があります。
コンポーネントオプションでローカルフィルターを定義する
filters:{
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() +value.slice(1)
}
}
过滤器可以串联：
{
{message | filterA | filterB }}グローバル フィルターを定義します。
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
アプリケーションシナリオ
通常の開発では、単位の変換、数値の管理、テキストの書式設定、時刻の書式設定など、フィルターを使用する必要がある場所がたくさんあります。
21. インタビュアー: 仮想 DOM とは何ですか? 仮想 DOM を実装するにはどうすればよいですか? あなたの考えを教えてください
仮想DOMとは
実際、これは実際の DOM を抽象化したレイヤーにすぎません。ツリーは JavaScript オブジェクト (VNode ノード) に基づいており、オブジェクトのプロパティはノードを記述するために使用されます。最後に、ツリーを実際の DOM にマッピングできます。一連の作業を通じて環境を整える
仮想 DOM が必要な理由
DOM の運用コストは依然として高く、頻繁な操作では依然としてページのフリーズが発生し、ユーザー エクスペリエンスに影響を及ぼします。
そして、VNode を通じて 10 個の DOM ノードも更新します。仮想 DOM はすぐには DOM を操作しませんが、これら 10 個の更新の差分コンテンツをローカルの js オブジェクトに保存し、最後にこの js オブジェクトを一度に DOM ツリーにアタッチします。大量の不必要な計算を避ける
仮想 DOM の最大の利点は、元のレンダリング プロセスを抽象化し、クロスプラットフォーム機能を実現することです。ブラウザの DOM に限定されず、Android や IOS のネイティブ コンポーネントにすることも、最近非常に人気のある小さなプログラムにすることもできます。 、またはさまざまな GUI である可能性があります
仮想 DOM を実装する方法
createElement は VNode を作成するプロセスであり、各 VNode には子があり、子の各要素も VNode であるため、実際の DOM ツリー構造を記述する仮想ツリー構造が形成されます。
22. インタビュアー: Vue の差分アルゴリズムをご存知ですか? 教えて
diff アルゴリズムはいつ実行されますか? 現在のコンポーネントが依存する値が更新され、コンポーネントが作成されるときに、update 関数を実行します。update 関数はコンポーネントの render 関数を呼び出し、render によって新しい仮想 dom ツリーが生成されます。Update は古い仮想 dom を置き換えます。新しい仮想 dom ツリーを使用してツリーを作成し、変数を使用して古い仮想 dom ツリーを保存し、diff 比較のためにpatch関数を呼び出します。
次に、Vue の差分は、新旧の domTree に従って同じレイヤーの深さ優先比較を実行します。親ノードが比較され、異なることが判明した場合、親ノードのすべての子ノードを比較する必要はなく、一緒に終了します。親ノードを比較し、同じであることが判明した場合は、次に親ノードの子ノードを比較し、さらに次の親ノードの子ノードを比較することで再帰的に比較します。 , まずタグ名が一致しているか比較し、次に要素のキー値が同じか比較します。入力されている場合は要素の型も比較します。すべて同じであれば同じです。 Vue の差分アルゴリズムは、古い DOM ツリーと新しい DOM ツリーの先頭と末尾のポインターの位置を記録し、それらをまとめて、徐々に比較して、実際の DOM ツリーの高度な再利用を保証します。dom、新しい仮想 dom ツリーの先頭ポインタが新しい仮想 dom ツリーの末尾ポインタより大きい場合、新しい仮想 dom ツリーの比較が完了し、diff が終了し、vue がベースになることを意味します新しい仮想 dom ツリーの比較結果の真実について dom ツリーをルート ノードに追加して、ページの実際の dom のレンダリングを完了します
23. インタビュアー: axios は Vue プロジェクトにパッケージ化されましたか? メインパッケージとは何ですか?
Axios はカプセル化されており、axios は HTTP リクエストを開始するたびに、タイムアウト時間の設定、リクエストヘッダの設定、プロジェクト環境に応じたリクエストアドレスの判断、エラー処理などの操作を記述する必要があります。この種の作業の重複は時間を無駄にするだけでなく、コードが冗長になり保守が困難になります。コードの品質を向上させるには、axios を使用する前にプロジェクト内で 2 回カプセル化する必要があります。
パッケージングの側面:
1. インターフェースリクエストのプレフィックスを設定します。ノード環境変数を使用して判断します。これは、開発環境、テスト環境、本番環境を区別するために使用されます。
2. リクエストヘッダーとタイムアウトを設定する
3. リクエスト メソッドをカプセル化します。最初にカプセル化されたメソッドを導入し、呼び出されるインターフェイスをメソッドに再カプセル化して公開し、カプセル化されたメソッドを api.js ファイルに置きます。
4. リクエストインターセプター: リクエストインターセプターは各リクエストにトークンを追加でき、統合処理後のメンテナンスが容易です
5. レスポンスインターセプタ: レスポンスを受信した後、ステータスコードに応じてログイン状態や認可を判断するなど、最初に 1 層の操作を実行できます。
24. インタビュアー: アクシオスの原理を理解していますか?
axios の単純なバージョンを実装し、axios インスタンスをエクスポートして、最終的なグローバル変数 axios を取得します。
classAxios {
constructor() {
}
request(config) {
return new Promise(resolve => {
const {url = '', method = 'get',data = {}} = config;
// 发送ajax请求
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onload = function() {
console.log(xhr.responseText)
resolve(xhr.responseText);
}
xhr.send(data);
})
}
}
//最终导出axios的方法，即实例的request方法
functionCreateAxiosFn() {
let axios = new Axios();
let req = axios.request.bind(axios);
return req;
}
//得到最后的全局变量axios
letaxios = CreateAxiosFn();
25. インタビュアー: SSR はどのような問題を解決しますか?
サーバーサイドレンダリング これを SSR と呼びます。これはサーバーサイドレンダリングを意味します。
サーバー側でページの HTML 構造の結合を完了し、それをブラウザーに送信し、ステータスとイベントをそれにバインドして完全にインタラクティブなページにするページ処理テクノロジーを指します。
従来の Web 開発: Web ページのコンテンツはサーバー側でレンダリングされ、一度にブラウザに送信されます。
シングルページ アプリケーション SPA: シングルページ アプリケーションの優れたユーザー エクスペリエンスにより、徐々に主流になりつつあります。ページ コンテンツは JS によってレンダリングされます。この方法はクライアントサイド レンダリングと呼ばれます。
SSR ソリューション、バックエンドは完全な最初の画面の dom 構造をレンダリングして返します。フロントエンドによって取得されるコンテンツには、最初の画面と完全なスパ構造が含まれます。アプリケーションがアクティブ化された後も、スパ モードで実行されます。
SSR は主に次の 2 つの問題を解決します。
1.SEOに貢献する
2. 最初の画面のレンダリング: ユーザーは、すべての js がページにロードされるのを待たずにページ ビューを確認できます (負荷はサーバーにかかるため、どれがサーバーによってレンダリングされ、どれがレンダリングされるかを考慮する必要があります)お客様にお渡しします）
26. インタビュアー: Vue プロジェクトのディレクトリ構造について教えてください。大規模なプロジェクトの場合、構造とコンポーネントをどのように分割すればよいですか?
Vue を使用してプロジェクトを構築すると、明確なプロジェクト構造により開発効率が向上し、プロジェクトのさまざまな構成に慣れることで開発効率も向上します。プロジェクト構造を分割するときは、いくつかの基本原則に従う必要があります。
1. フォルダーとフォルダー内のファイルの意味的一貫性
ページ フォルダーなど、このフォルダーにはプロジェクトのすべてのルーティング モジュールが含まれ、ルーティング モジュールのみが含まれ、他の非ルーティング モジュール フォルダーがあってはなりません。
2. 単一の入口/出口
モジュールフォルダー内がどんなに乱雑でも、外部から参照される場合はエントリーファイルからインポートされます。
3. 近接性の原則により、密結合されたファイルはまとめられ、相対パスで参照される必要があります。
4. 公開ファイルはルートディレクトリから絶対パスで参照する必要があります。
5. /src 以外のファイルはインポートしないでください。
ディレクトリ構造:
build フォルダー。プロジェクトのビルド スクリプトを保存するために使用されます。
プロジェクトのいくつかの基本的な構成情報は config に保存されます。最も一般的に使用されるのはポート転送です。
node_modules ディレクトリには、プロジェクトのすべての依存関係、つまり npm install コマンドによってダウンロードされたファイルが保存されます。
プロジェクトのソース コードは src ディレクトリに保存されます。つまり、開発者が作成したコードはここに配置されます。
static は静的リソースを保存するために使用されます
index.html はプロジェクトのホームページ、エントリ ページ、そしてプロジェクト全体の唯一の HTML ページです。
開発時の依存関係とリリース時の依存関係を含む、プロジェクトのすべての依存関係は package.json で定義されます。
src 内のファイル ディレクトリは次のとおりです。
アセット ディレクトリはアセット ファイルの保存に使用されます
コンポーネント ディレクトリは、コンポーネント (一部の再利用可能な非独立ページ) を保存するために使用されます。もちろん、開発者はコンポーネント内に完全なページを直接作成することもできます。
コンポーネントをコンポーネントに保存し、ページをルーティングするための別のページ フォルダーを作成することをお勧めします。
ルーターディレクトリにはルートのjsファイルが格納されます
App.vue は Vue コンポーネントであり、プロジェクトの最初の Vue コンポーネントです。
main.js はプロジェクト全体のエントリ js です
27. インタビュアー: 権限を管理するには vue は何をすべきですか? 権限がボタンレベルで制御されている場合はどうなるでしょうか?
最終的な分析では、フロントエンド権限はリクエストを開始する権利であり、リクエストの開始は次の 2 つの形式によってトリガーされる可能性があります。
1. ページの読み込みによってトリガーされます。 2. ページ上のボタンのクリックによってトリガーされます。
1. インターフェースの権限
ログイン後、トークンを取得し、トークンを保存し、axios リクエスト インターセプターを通じてそれをインターセプトします。リクエストが行われるたびに、ヘッダーにトークンが含まれます。
2. ルーティング権限の制御
初期化するときは、まずログイン ページ、404、その他のエラー ページなど、権限制御を必要としないルートをマウントします。ユーザーが URL 経由で強制アクセスを実行すると、直接 404 が入力され、ソースから制御するのと同じになります。ログイン後、ユーザーの権限情報を取得し、アクセス権限のあるルートをフィルタリングし、グローバルルーティングガードのaddRoutesを呼び出してルートを追加します。
3. ボタンの権限
ボタンの権限は v-if によって判断することも、ボタンの権限はカスタム命令によって判断することもできます
4. メニューの権限
1. メニューはルーティングから分離され、メニューはバックエンドによって返されます。
2. メニューとルーティングがバックエンドによって返されます。
28. インタビュアー: Vue プロジェクトでクロスドメインをどのように解決しますか?
クロスドメインの本質は同一生成元ポリシーに基づくブラウザのセキュリティ方式です
同一オリジン ポリシーとは、アクセスするプロトコル ホストのポート番号がすべて同じであることを意味します。
逆に、ソースが同じでないリクエスト、つまりプロトコル、ポート、ホストのいずれかが異なる場合、この時点でクロスドメインリクエストが発生します。
クロスドメイン JSONP、CORS、プロキシを解決するには多くの方法があります
vue プロジェクトでは主に CORS または Proxy の 2 つのスキームに向けて開発されています
1. バックエンドが CORS を実装している限り、クロスドメインが実現され、サーバーが許可されたアクセス ソースを宣言できるようにするには、一部の HTTP ヘッダーを追加するだけで済みます。
2.プロキシプロキシサーバー
Webpack を介してリクエストのプロキシ オブジェクトとしてローカル サーバーを設定し、サーバーを介してターゲット サーバーにリクエストを転送し、結果を取得してフロントエンドに転送できます。
proxy:{
'/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
target:"http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
changeOrigin: true, //是否跨域
pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
'^/api': ""
}
29. 質問者: Vue プロジェクトのローカル開発が完了してサーバーにデプロイされた後で 404 を報告する理由は何ですか?
ルーチンのフロントエンド デプロイメントでは、Vue プロジェクトのビルド後に生成される一連の静的ファイルをターゲット サーバーにアップロードするだけで済みます。
HTTP404 エラーは、リンクが指すリソースが存在しないことを意味します。この問題は履歴モードでのみ発生します。
更新操作を実行すると、履歴モードには関連する設定がないため、404 が表示されます。
ただし、ハッシュ モードでは問題はありません。ハッシュは URL に表示されますが、HTTP リクエストには含まれず、サーバーに影響を与えないため、ハッシュを変更してもページはリロードされません。
解決：
問題の核心は、サブルーティングに入ってページを更新すると、Web コンテナ内に対応するページがない場合に 404 が表示されるため、任意のページをindex.html にリダイレクトするように設定するだけで済みます。処理のためにフロントエンドにルーティングを渡します
30. インタビュアー: Vue プロジェクトのエラーにはどのように対処しますか?
エラーの主な原因は次のとおりです。
1. バックエンドインターフェイスエラー 2. コード自体のロジックエラー
バックエンド インターフェイス エラーは、 axios のインターセプタを介して実装でき、ネットワーク リクエストの応答に対して最初にインターセプト層を実装できます。
コードロジックの問題
グローバルエラーハンドラーを設定する
Vue.config.errorHandler= function (err, vm, info) {
}errorHandler は、コンポーネントのレンダリングおよび表示中に捕捉されなかったエラーのハンドラーを指定します。このハンドラーを呼び出すと、エラーメッセージと Vue インスタンスを取得できます。
2. ライフサイクルフック
errorCaptured は、子孫コンポーネントからのエラーがキャプチャされたときに呼び出される新しいライフフック関数です。
31. Vue でよく使用されるコマンドは何ですか? そしてその役割を説明します
1.v-モデル
役割: 双方向のデータバインディングを実現するためのフォーム要素に主に使用されます。
2.v-bind 動的バインディング
要素の属性の値を動的にバインドします。一般に次のように省略されます。
機能: ページのデータを時間内に変更します。
3. v-動的レンダリング用
v-for ディレクティブは、配列に基づいてリストをレンダリングします。キー値を設定し、各キー値が一意であることを確認することをお勧めします。これにより、差分アルゴリズムの最適化が容易になります。
4.v-show表示内容
v-show の原理は、要素の「表示」スタイルを動的に追加または削除して、要素を表示または非表示にすることです。
5. v-if の表示と非表示
v-if の原理は、DOM ツリー上で要素を動的に作成または削除して、要素の表示と非表示を実現することです。
6. v-on は関数をラベルにバインドします
@ と省略できます。たとえば、クリック関数のバインドはメソッド内に記述する必要があります。
7. v-text と v-html はテキストを解析します
v-text: タグではなくテキストの解析に使用され、要素内の元のコンテンツが上書きされます。
v-html: タグ付き文字列を実際の HTML コンテンツにレンダリングできます。
32. Vuex の理解と使用シナリオ
Vuex は、Vue アプリケーション専用に開発された状態管理パターンです。すべての Vuex アプリケーションの中心となるのはストアです
Vuex の状態ストアは応答性があり、Vue コンポーネントがストアから状態を読み取るときは次のようになります。
1. ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。
2. ストア内の状態を変更する唯一の方法は、ミューテーションを明示的に送信することです。これにより、各状態の変化を簡単に追跡できます。Vuex には主に次のコア モジュールが含まれています。
3. 状態: アプリケーションの状態データを定義します。
4. ゲッター: ストア内で「ゲッター」を定義します (ストアの計算されたプロパティと見なすことができます)。
計算されたプロパティと同様に、ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。
5. ミューテーション: ストア内の状態を変更する唯一の方法であり、同期関数である必要があります。
6. アクション: 状態を直接変更する代わりに、変更を送信するために使用され、非同期操作を含めることができます。
7. モジュール: 1 つのストアを複数のストアに分割し、同時に 1 つの状態ツリーに保存できるようにします。