vue 概述

Vvue の利点:

軽量フレームワーク: ビュー層のみに焦点を当てます。データを構築するためのビューのコレクションであり、サイズはわずかインスタント Kb です。
学びやすい: 中国語の開発、中国語のドキュメント、言語の壁がなく、理解しやすく、学びやすい
双方向データバインディング: Angular の特性を保持し、データ操作がより簡単になります。
コンポーネント化: React の利点を維持し、HTML のカプセル化と再利用を実現し、単一ページアプリケーションの構築に独自の利点をもたらします。
ビュー: データと構造が分離されているため、データの変更が容易になり、ロジックコードの変更が不要で、関連する操作はデータを操作するだけで完了できます。
仮想 DOM: dom はパフォーマンスを非常に消費し、ネイティブ dom 操作ノードを使用しなくなり、dom 操作が大幅に解放されます。ただし、特定の操作は依然として dom ですが、別の方法です。
実行速度が速い: React と比較して仮想 dom も動作し、パフォーマンスの面では vue の方が優れています

SPA シングルページについての理解と、その利点と欠点について説明してください。

SPA は、Web ページの初期化時に、対応する HTML、JS、および CSS のみを読み込みます。
ページがロードされると、SPA はユーザーのアクションによってページをリロードしたりジャンプしたりしません。
ページの変更は、ルーティングメカニズムを使用して HTML コンテンツの変換を実現し、ページのリロードを回避します。

アドバンテージ：

ユーザーエクスペリエンスは良好で、コンテンツの変更時にページ全体をリロードする必要がなく、不必要なジャンプやレンダリングの繰り返しが回避されます。
不要なジャンプやレンダリングの繰り返しを減らし、サーバーへの負荷を相対的に軽減します。
フロントエンドとバックエンドの責任の分離、明確な構造、フロントエンドの対話ロジック、データ処理を担当するバックエンド

欠点:

初めての読み込みに時間がかかる
ブラウザの進む・戻る機能は使用できませんシングルページアプリケーションはすべてのコンテンツを1ページに表示するため、進む・戻るはできません
検索エンジンの検索には適さない: すべてのコンテンツが動的に置き換えられて 1 つのページに表示されるため、SEO において当然の弱点があります。

SPAの最初の画面の読み込み速度が遅い場合の解決方法

最初の画面時間: ユーザーが入力した URL にブラウザーが応答してから、最初の画面のコンテンツがレンダリングされるまでの時間を指します。このとき、ページ全体が完全にレンダリングされる必要はありませんが、現在のウィンドウに必要なコンテンツを表示します。

最初の画面の読み込みが遅い理由:

ネットワーク遅延の問題
リソースファイルのサイズが大きすぎるかどうか
リソースがロード要求を繰り返し送信したかどうか
スクリプトをロードすると、レンダリングコンテンツがブロックされる

いくつかの一般的な SPA ファーストスクリーン最適化方法

エントリファイルのサイズを減らす
静的リソースのローカルキャッシュ
オンデマンドでロードされる UI フレームワーク
画像リソースの圧縮
コンポーネントが再パッケージ化される
Gzip パッケージ化を有効にする
SSRを使う

SPA については、非常に詳細に書かれたブログがありますので、ご興味があればご覧ください:初期化中にSPA
Vue が行うことの説明 (新しい Vue(オプション))

構成アイテムの処理と構築: ルートコンポーネントの初期化時に、オプションのマージ操作が実行され、グローバル構成がルートコンポーネントのローカル構成にマージされ、各サブコンポーネントの初期化時に、一部のパフォーマンスの最適化が実行され、一部のコードの実行効率を向上させるために、コンポーネント構成オブジェクトの深いレベルの属性が vm.$options オプションに配置されました。
親、子、ルート、参照など、コンポーネントインスタンスの関係プロパティを初期化します。
カスタムイベントを処理する
Before Createフック関数を呼び出す
コンポーネントのインジェクト構成アイテムを初期化し、ref[key]=val の形式で構成オブジェクトを取得し、構成オブジェクトに対して応答処理を実行し、各キーを vm サンプルにプロキシします。
データ応答性、プロップ、メソッド、データ、計算、監視、その他のオプションの処理
コンポーネント構成項目の Provide オブジェクトを解析し、それを vm_provided 属性にマウントします
作成したフック関数を呼び出す
設定に el オプションがあることが判明した場合、$mount メソッドが自動的に呼び出されます。つまり、el. オプションを使用すると、手動で $mount メソッドを呼び出す必要はありません。 el オプションが指定されていないため、$mount を呼び出す必要があります
次にマウントフェーズに入ります

MVVMの理解

MVVM は、モデル、ビュー、ビューモデルの 3 つの部分で構成されます。モデル層はデータモデルを表し、データの変更と操作のビジネスロジックもモデルで定義できます。ビューは、変換を担当する UI コンポーネントを表します。データモデルを UI 表示に変換します。ビューモデルはビューとモデルの同期オブジェクトです

MVVM アーキテクチャでは、View と Model の間に直接の接続はなく、ViewModel を介して行われます。Model と ViewModel 間の対話は双方向であるため、View データの変更は Model に同期され、Model データの変更もすぐに反映されます。ビューで。

ViewModel は、双方向のデータバインディングを介して View 層と Model 層を接続し、View 層とモデル間の同期は介入なしで完全に自動化されるため、開発者はビジネスロジックに注意するだけでよく、手動で操作する必要はありません。 DOM. データ状態の同期、複雑なデータ状態の維持は MVVM によって完全に管理されます

Vue データの双方向バインディングの原則

MVVMデータの双方向バインディングを実現するために、パブリッシャー・サブスクライバーモードと組み合わせたデータハイジャック手法を採用しており、Object.defineProperty()を使用して各プロパティにセッターとゲッターを追加し、監視をハイジャックします。サブスクライバへのメッセージと、対応するリスナーコールバックのトリガー。

いくつかのことを行う必要があります。

データオブジェクトのすべてのプロパティを監視できるデータリスナーオブザーバーを実装します。変更がある場合は、最新の値を取得してサブスクライバーに通知できます。
コマンドパーサーの実装各要素ノードのコマンドをコンパイル、スキャン、解析し、コマンドテンプレートに従ってデータを置換し、対応する更新関数をバインドします
オブザーバーとコンパイルを接続するブリッジとしてウォッチャーを実装します。各属性変更の通知をサブスクライブして受信し、対応する命令のコールバック関数を実行し、ビューを更新できます。

Vue のレスポンシブ原則

応答性とは、データが変更されるとビューが再レンダリングされ、一致が最新の値に更新されることです。

Object.defineProperty は、オブジェクト内の各プロパティの get. メソッドと set. メソッドを設定します。宣言された各プロパティには、専用の依存関係コレクターサブルーチンがあります。ページが特定のプロパティを使用すると、オブジェクトのウォッチャーである Object.definePropertyget 関数がトリガーされます。ページはプロパティの依存関係コレクターのサブに配置され、データが変更されると通知が更新されます。データが変更されると、Object.defineProperty-set 関数がトリガーされ、データは独自の依存関係コレクターのサブを走査します。、ウォッチャーに 1 つずつ通知すると、ビューの更新が開始されます。

Vue 3.x のレスポンシブデータ原則:

Vue3.x は、object.defineProperty の代わりに Proxy を使用します。プロキシはオブジェクトと配列の変更を直接監視でき、13 ものインターセプトメソッドを備えているため、新しい標準として、ブラウザメーカーによって継続的に最適化されます。プロキシは、プロキシオブジェクトの最初の層。vue3 はそれをどのように処理しますか

現在の Reflect.get の戻り値が Object であるかどうかを判断し、Object である場合はリアクティブメソッドをプロキシとして使用することで、詳細な観察を実現します。配列を監視する場合、get/set が複数回トリガーされる可能性があります。複数のトリガーを防ぐにはどうすればよいでしょうか? キーが現在のプロキシオブジェクトのターゲットそのものの属性であるか、古い値と新しい値が等しいかどうかを判断でき、上記2つの条件のいずれかが満たされた場合にのみトリガーが実行されます。

Vue 3.0 がdefineProperty API ではなくプロキシ API を使用するのはなぜですか

definePropety API の制限の最大の理由は、シングルトンプロパティのみを監視できることです。Vue2.x の応答性の高い実装は、形式的には objectProperty の記述子に基づいています。データ内のプロパティを走査および再帰し、各プロパティの値を設定します。 .ゲッター/セッター。これが、vue がデータで定義された属性にのみ応答できる理由です
プロキシ API の監視はオブジェクトを対象としているため、このオブジェクトに対するすべての操作が監視操作に入り、すべての属性を完全にプロキシできるため、パフォーマンスが大幅に向上し、コードの改善がもたらされます。プロキシは、次のように理解できます。ターゲットオブジェクトの前に「インターセプト」層があり、オブジェクトへの外部のアクセスは最初にこのインターセプト層を通過する必要があるため、外部のアクセスをフィルタリングして書き換えるメカニズムが提供されます。
リアクティブとは怠け者です。Vue2.x では、深いプロパティのネストを持つオブジェクトの場合、その深い内部変更をハイジャックしたい場合は、オブジェクトを再帰的に走査し、Object.defineProperty を実行して、オブジェクトデータの各層を応答性にする必要があります。パフォーマンスの消費が多くなります。Vue3.0では、Proxy APIを使用するとオブジェクト内部の深いレベルのプロパティの変化を監視できないため、getterで再帰的に応答する処理方法となり、実際にアクセスした内部プロパティが応答になるという利点があります。言い換えれば、オンデマンドの応答性を実現し、パフォーマンスの消費を削減すると言えます。

プロキシと Object.defineProxy の長所と短所

プロキシはプロパティではなくオブジェクトを直接リッスンできます
プロキシはアレイ内の変更を監視できます
プロキシには 13 のインターセプトメソッドがあります: apply、ownKeys、deleteProperty、has などに限定されませんが、Object.defineProperty にはありません。
プロキシは新しいオブジェクトを返します。目的を達成するために新しいオブジェクトを操作することしかできません。Object.defineProperty はオブジェクトのプロパティを走査して直接変更することしかできません。
新しい標準として、プロキシはブラウザメーカーによって継続的に最適化されます。これは、伝説的な新しい標準のパフォーマンス上の利点です。
ObjectProperty の利点: 優れた互換性、IE9 のサポート、プロキシにはブラウザ互換性の問題があり、ポリフィルでスムーズにできないため、Vue の作成者は、プロキシを使用して再作成するには次のメジャーバージョン (3.0) まで待つ必要があると宣言しています。

Vue のコンポーネントのデータが関数であるのに、新しい Vue インスタンスではデータを直接オブジェクトにできるのはなぜですか

各 .vue ファイルは Vue コンポーネントであり、Vue コンポーネントは実際には Vue インスタンスであることがわかっています。J のインスタンスはコンストラクターを通じて作成され、各コンストラクターは多くのザクロを作成できるため、各インスタンスはプロトタイプのメソッドまたはプロパティを継続します。Vue のデータ data は実際には Vue プロトタイプ上の属性であり、データはメモリ内に存在します。各インスタンス上のデータの独立性を確保するために、Vue ではオブジェクトの代わりに関数を使用する必要があると規定しています。オブジェクトを使用するため、各インスタンス (コンポーネント) で使用されるデータは相互に影響を与えますが、これはもちろん望ましいことではありません。オブジェクトはメモリアドレスへの参照であり、オブジェクトを直接定義するとコンポーネント間でこのオブジェクトが使用されるため、コンポーネント間のデータが相互に影響を及ぼします。この関数を使用した後は data() 関数が使用されますが、data() 関数内の this は現在のインスタンス自体を指しているため、相互に影響を与えることはありません。新しい Vue のインスタンスは再利用されないため、オブジェクトの参照には問題ありません。

Vue のデータの属性はメソッドのメソッドと同じ名前を持つことができますか?なぜですか?

Vue の data 属性はメソッド内のメソッドと同じ名前を持つことができますが、メソッド内のメソッドは data 属性によって上書きされ、デバッガーにエラーメッセージが表示されますが、実行には影響しません。その理由は、ソースコードで定義されている initState 関数の内部実行順序が props>methods>data>computed>watch であるためです。

Vue での作成とマウントの違い

作成フェーズではインスタンスは初期化されていますが、elにはマウントされていないため、対応するノードを取得できませんが、この時点ではvueのdataとメソッドでデータを取得できます。

マウント段階では、vue のテンプレートが el に正常にマウントされ、ブラウザに完全なページが表示されるので、この段階でノードを呼び出すことができます。

Vue の計算メソッドとメソッドの違い

Computed と Method は同じ点で、テンプレートデータとして表示されれば、対応する機能を実現できます。唯一の違いは、メソッドで定義されたメソッドを実行する必要があることです。

計算されたものとメソッドの違い:

競合は応答データに基づいてキャッシュされますが、メソッドはキャッシュされません
diff の前に data 内のデータが変更されているかどうかを確認し、変更がなければ計算されたメソッドは実行されませんが、メソッド内のメソッドは実行されます
computed はプロパティ呼び出し、methods は関数呼び出しです。

仮想DOMにおけるキーの役割

簡単に言えば、キーは仮想 DOM オブジェクトの一意の識別子であり、キーは表示を更新する際に非常に重要な役割を果たします。
もっと複雑に言うと、状態内のデータが変化すると、React は新しいデータに基づいて新しい仮想 DOM を生成し、その後、React は新しい仮想 DOM と古い仮想 DOM の差分比較を実行します。
比較ルールは次のとおりです: 新しい仮想 DOM と同じキーが古い仮想 DOM で見つかった場合、仮想 DOM のコンテンツが変更されていない場合は、以前の実際の DOM が直接使用されます。 DOM が変更された場合、新しい実 DOM が生成され、ページ内の以前の実 DOM を置き換えます。新しい仮想 DOM と同じキーが古い仮想 DOM に見つからない場合は、データに基づいて新しい実際の DOM が作成され、ページにレンダリングされます。

インデックスをキーとして使用すると問題が発生する可能性があります

データを逆順に追加・削除するなど順序が崩れるような操作を行うと、実際のDOMの不要な更新が発生し、インターフェースには問題ありませんが、データが多すぎると効率が悪くなります。
構造体に入力クラスの DOM も含まれている場合、エラー DOM 更新が生成され、インターフェイスに問題が発生します。
データに対して逆順の操作がない場合は、表示用のテーブルのレンダリングに限定され、キーとしてインデックスを使用しても問題ありません。

Vueでのwatchの使い方を詳しく解説

Vue では、watch はデータの変更を監視するために使用されます。これは、ハンドラーメソッド、イミディエイトおよびディープを含む、監視対象データの背後にあるオブジェクトとして書き込むことができます。
immediate は、ウォッチが初めてバインドされたときにハンドラーを実行するかどうかを意味し、値が true の場合は、ウォッチが宣言されたときにハンドラーメソッドがすぐに実行されることを意味し、値が false の場合は、一般的な使用法と同じです時計のデータ変更時のみハンドラを実行します。
オブジェクトの変更を監視する必要がある場合、通常の watch メソッドではオブジェクトの内部プロパティの変更を監視できません。変更を監視できるのは data 内のデータのみです。このとき、deep プロパティを使用してオブジェクトの内部プロパティの変更を監視する必要があります。深く異議を唱え、その価値は真である

Vue でのミックスインの理解と使用

ミックスインは、Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法です。混合オブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントが混合オブジェクトを使用する場合、混合オブジェクトのすべてのオプションは、コンポーネント自体のオプションに混合されます。ミックスインがコンポーネントに導入された後、コンポーネントの内部コンテンツは次のようになります。データとその他のメソッド、メソッドとその他の属性親コンポーネントの対応するコンテンツとマージします。導入後、親コンポーネントの各種属性メソッドが拡張されたことに相当します。

非常に優れたブログがありますので、参照してください: mixins

Vue のスロット: Vue の魔法の武器、スロットスロット!

Vue が非同期レンダリングを使用する理由

Vue はコンポーネントレベルの更新であり、現在のコンポーネントのデータが変更されると、コンポーネントも更新されます。一度データを変更するとコンポーネントを再度レンダリングする必要があり、パフォーマンスが高くないため、データ更新と同時にコンポーネントが更新されることを防ぐため、非同期レンダリングを行っています。(コアメソッドは nextTick です)
ソースコード実装の原則: データが変更されると、notify メソッドが呼び出され、ウォッチャーがトラバースされ、Update メソッドが呼び出されてウォッチャーに更新を通知します。このとき、ウォッチャーはすぐには実行されません。更新では、 queueWatcher メソッドが呼び出されてウォッチャーをキューに追加し、 queueWatcher はウォッチャーに従って重複を排除します。複数の属性がウォッチャーに依存します。キューにウォッチャーがない場合、ウォッチャーはキューを更新すると、flushSchedulerQueue メソッドが nextTick を通じて非同期的に実行され、ウォッチャーキューが更新されます。flashSchedulerQueue は before メソッド (実際には beforeUpdate です) のトリガーを開始し、その後 watcher.run() が実際にウォッチャーの実行を開始します。ページの実行後、レンダリングが完了し、更新されたフックが呼び出されます。アップデートが完了した後。

Vue の非同期更新メカニズムの実装方法

Vue の非同期更新メカニズムの中核は、ブラウザの非同期タスクキューを使用して実装されます。マイクロタスクキューが優先され、次にマクロタスクキューが続きます。
レスポンシブデータが更新されると、dep.notifyメソッドが呼び出され、depで収集したウォッチャーに更新メソッドの実行を通知し、watcher.upadteによってウォッチャー自身をウォッチャーキュー（グローバルキュー配列）に入れます。次に、nextTick メソッドを使用して、ウォッチャーキュー (flushSchedulerQueue) をグローバルコールバック配列に更新するメソッドを配置します。このときブラウザの非同期タスクキューにflushCallbacksという関数が存在しない場合は、timeFunc関数を実行し、flushCallbacks関数を非同期タスクキューに入れます。非同期タスクキューにすでにflushCallbacks関数がある場合は、その関数が実行されるまで待ってから、次のflushCallbacks関数を追加します。lushCallbacks関数は、コールバック配列内のすべてのflushSchedulerQueue関数の実行を担当します。flashSchedulerQueue 関数は、ウォッチャーキューをリフレッシュする役割を果たします。つまり、キュー配列内の各ウォッチャーの run メソッドを実行して、コンポーネント更新関数の実行やユーザーウォッチのコールバック関数の実行など、更新フェーズに入ります。

$nextTick についての理解

$nextTick の使用法: 次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。
実装の原則と理由: Vue の応答性の実装は、データ変更直後に DOM を変更するのではなく、特定の戦略に従って DOM を更新することです。Vue は DOM の更新時に非同期で実行され、データの変更が検出される限り、Vue はキューを開き、同じイベントループ内で発生するすべてのデータ変更をバッファーに入れます。同じウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。バッファリング中のこの重複排除は、不必要な計算や DOM 操作にとって非常に重要です。ただし、次のイベントループ「tick」では、Vue はキューをフラッシュし、実際の (重複排除のための) 作業を実行します。したがって、データ変更後に Vue が DOM の更新を完了するのを待つために、データ変更の直後に Vue.nextTick(callback) を使用して、DOM 更新の完了後にコールバック関数が呼び出されるようにすることができます。
使用シナリオ: データを更新した後、レンダリングされた DOM を時間内に操作する必要があります。

Vue のカスタムディレクティブ

Vue コア関数のデフォルトの組み込み命令に加えて、Vue ではカスタム命令の登録も可能です
カスタム命令は、DOM の操作に使用されます。Vue はデータ駆動型ビューの概念を提唱していますが、すべての状況がデータ駆動型に適しているわけではありません。カスタム命令は効果的な補足および拡張であり、DOM 操作の定義に使用できるだけでなく、再利用可能です。
カスタムディレクティブを追加する 2 つの方法: グローバルディレクティブとローカルディレクティブ
グローバルディレクティブ: Vue.directive() 関数を通じてグローバルディレクティブを登録します。
ローカル命令: コンポーネントの directives プロパティを通じてローカル命令をコンポーネントに追加します。
よく書かれたブログがいくつかあります。興味がある場合は、詳細な説明を参照してください:カスタム手順
使用されるシナリオ: v-image など: ログイン用のデフォルトのアバター

v-if と v-for を一緒に使用しない理由

vue 2.x バージョンでは、v-if を v-for と一緒に使用すると、v-for の方が v-if よりも優先されます。
vue 3.x バージョンでは、v-if を v-for と一緒に使用すると、v-if の方が v-for よりも優先されます。
公式は明確に指摘しています: v-if と v-for を一緒に使用することは避け、要素に対してこれら 2 つの命令を同時に使用しないでください。
この解決策: 最初に計算データ内のデータをフィルタリングしてから、トラバーサルレンダリングを実行できます。動作と実装には問題はなく、ページは正常に表示されますが、不必要なパフォーマンスの消費が発生します。

v-show と v-if の類似点と相違点

同じ点: v-show と v-if はどちらも要素の表示と非表示を制御できます。
相違点: 実装方法が異なります v-show の本質は CSS の表示設定を none に設定することで非表示を制御することです; v-if は DOM ツリーに DOM 要素を動的に追加または削除します; v-show はコンパイルされ、初期値は false です。表示を none に設定するだけでコンパイルも行われます。v-if の初期値が false の場合はコンパイルされません。
v-show は一度だけコンパイルされ、後者は実際に CSS を制御するために使用されますが、v-if は常に破棄および作成されます。頻繁にノードを切り替えたい場合は、v-show の方がパフォーマンスが優れています。
実際の開発で使用するシナリオ：ボタン権限制御：v-if、選択ボックスフィルタ条件制御：ボタン表示・非表示制御：v-show;

Vue が HTML 内のイベントをリッスンするのはなぜですか

このイベントリスニングの方法が、関心を分離するという長年の伝統に反していることに気づいたかもしれません。ただし、すべての Vue.js イベント処理メソッドと式は現在のビューの ViewModel に厳密にバインドされているため、メンテナンスが困難になることはありませんので、ご安心ください。
実際、v-on または @ を使用すると、いくつかの利点があります。
HTML テンプレートを一目見るだけで、JavaScript コード内の対応するメソッドを簡単に見つけることができます。JavaScript でイベントを手動でバインドする必要がないため、ViewMode コードは非常に純粋なロジックになり、DOM から完全に切り離され、テストが容易になります。。ViewModel が破棄されると、すべてのイベントハンドラーが自動的に削除されるため、クリーンアップについて心配する必要はありません。

Vue.set は配列とオブジェクトのプロパティを変更します

コンポーネントインスタンスでは、data で初期化されたデータのみが応答します。Vue はオブジェクトプロパティの追加または削除を監視できません。data で宣言されていないプロパティは応答しないため、データは変更されますが、ページレンダリングでは変更されません。
解決策: Vue.set(object,key,value) メソッドを使用して、ネストされたオブジェクトに応答プロパティを追加します。
Vue.set(object,key,value) エイリアス vm.$set
vm.$set(obj,key,value) の機能: Vue はオブジェクトの新しいプロパティを検出したり、インデックスを介して配列に要素を追加したりできないため、Vue のエイリアスである vm.set が存在します。 set; vm.set は、新しいプロパティをリアクティブオブジェクトに追加し、新しいプロパティも応答性であることを確認し、ビューの更新をトリガーするために使用されます。
応答データをオブジェクトに追加します。defineReactive メソッドを呼び出してオブジェクトに応答データを提供し、dep.notify を実行して依存関係を通知し、ビューを更新します。
新しい応答データを配列に追加します: splice メソッドを使用します。

Vue ライフサイクルの理解について話す

Vue ライフサイクル: 平たく言えば、Vue インスタンスの作成から破棄までのプロセス、8 つのフック関数
beforecreate (初期化インターフェイスの前) created (初期化インターフェイスの後)
beforemount (インターフェイスのレンダリング前) マウントされた (インターフェイスのレンダリング後)
beforeupdate (データ更新前) updated (データ更新後)
beforedestory (コンポーネントのアンインストール前) destroy (コンポーネントのアンインストール後)
この質問をされたときに、8 つのフック関数が何をするのか説明できることは言及しておく価値があります。

最初のページの読み込み時にトリガーされるフック: beforeCreate、created、beforemount、mounted

Vueコンポーネントの通信方法は何ですか

父から息子へ：小道具。親コンポーネントは、props を介して子コンポーネントにデータを渡します。サブコンポーネントデータには、props、data、computed の 3 つの形式があります。
父から息子/孫へ：提供して注射します。親コンポーネントは、子孫コンポーネントの属性と共有する必要がある Provide メソッド return を定義し、子孫コンポーネントは、inject オプションを使用して、このインスタンスに追加する指定された属性を受け取ります。
息子から父親へ: $emit。子コンポーネントは $emit() イベントを通じて親コンポーネントにメッセージを送信し、親コンポーネントは v-on バインディングイベントを通じてデータを受信します。
父と息子、兄弟、クロスレベル: イベントバス。このメソッドは、空の Vue インスタンスを中央のイベントバス (イベントセンター) として使用し、それを使用してイベントをトリガー (発行) し、イベントをリッスン (オン) し、あらゆるコンポーネント間の通信を巧妙かつ明確に実現します。
通信プラグイン: PubSub.js
Vuex: vuex は vue の状態マネージャーであり、保存されたデータは応答します。共有値を vuex に置くだけでよく、その他の必要なコンポーネントは直接取得して使用できます。

ルーターとルートの違い

VueRouter のインスタンスとして、ルーターはグローバルルーターオブジェクトと同等であり、これには多くのプロパティとサブオブジェクト (履歴オブジェクトなど) が含まれます。頻繁に使用されるジャンプリンクには、ルーターリンクジャンプと同じ this.$router.push を使用できます。
ルートは現在ジャンプしているルーティングオブジェクトに相当し、そこから名前、パス、パラメータ、クエリなどを取得できます。

Vue-routerにはいくつかのフック関数があります

グローバルルーティング: グローバルルーティングナビゲーションフックには、主に 2 つのタイプがあります: プレガード (beforeEach)、ポストフック (afterEach)
ルーティング専用フック: 単一ルート専用のナビゲーションフック。構成ルート上で直接定義されます。
コンポーネントのナビゲーションフック: コンポーネントには、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave の 3 つの主なタイプのナビゲーションフックがあります。これらはルーティングコンポーネント内で直接定義されます。
詳しいルートが確認できる

Vue-router ルーティングジャンプモード

宣言型 (ラベルジャンプ)
プログラムによる (js ジャンプ)

Vue-router ルーティングパラメータ

ruoter-link ページボタンのルーティングジャンプパラメータ転送を実行します: ルータ内のルーティング設定パラメータ転送; 親コンポーネントホームクリックしてパラメータを転送; 子コンポーネント homeDetails はパラメータ転送を受け入れます
もっと良いブログがありますので参考にしてください。
プログラムによるルーティングジャンプ転送パラメータの this.$router.push: ルーターのルーティング設定パラメータ、親コンポーネントのホームをクリックしてパラメータを渡します、子コンポーネントの homeDetails はパラメータを受け取ります。このうち、ルーティング設定パラメータを params で渡すには、ルーティング設定、ネームルーティング設定またはクエリルーティング設定、およびルーティング設定の 2 つの方法があります。
もっと良いブログがありますので参考にしてください。

キープアライブの理解

まず、<keep-alive> は Vue の組み込みコンポーネントです。コンポーネントの切り替え中に状態をメモリに保持し、DOM の繰り返しレンダリングを防ぐことができます。
2 番目に、これが実装される理由は、 <keep-alive> が動的コンポーネントをラップするときに、非アクティブなコンポーネントのインスタンスを破棄するのではなくキャッシュするためです。

Vuex とは何ですか、何をするのか、そしてどのように使用するのか

Vuex は、コンポーネントのグローバルな状態 (データ) 管理を実現するメカニズムであり、コンポーネントデータの共有を容易にすることができます。
Vuex は共有データを一元管理するため、後からの開発と保守が簡単になります
Vuexはコンポーネント間でのデータ共有を実現し、開発効率を向上させることができます
Vuex Vuex に保存されたデータは応答性が高く、ページとデータをリアルタイムで同期し続けることができます。
Vuex の重要なコア属性には、状態、ミューテーション、アクション、ゲッター、モジュールが含まれます。
state :vuex は単一の状態ツリーを使用します。つまり、各アプリケーションにはストアインスタンスが 1 つだけ含まれますが、単一の状態ツリーはモジュール性と競合しません。保存されたデータの状態は直接変更できず、ミューテーションを介して渡す必要があります。
突然変異: 定義されたメソッドは、Vuex ストア内の状態またはデータを動的に変更します。
action: ミューテーションにおけるデータの処理方法を非同期にデータを処理する方法に変更すると理解できます。簡単に言えば、データを非同期に操作することです。View レイヤーは、store.dispath を通じてアクションを配布します。
getters: vue に似た計算されたプロパティ。主に一部のデータをフィルターするために使用されます。
モジュール: プロジェクトが特に複雑な場合、各モジュールに独自の状態、突然変異、アクション、ゲッターを持たせることで、構造が非常に明確になり、管理しやすくなります。より読みやすいブログがあります。
使用シナリオ: アプリケーションが十分に単純な場合は、vuex を使用しないことをお勧めします。単純なストアモードで十分です。中規模から大規模の単一ページアプリケーションを構築する必要がある場合は、vuex を使用して、外部の状態をより適切に管理します。成分。

Vuex と純粋なグローバルオブジェクトの違いは何ですか

Vuex の状態ストアはリアクティブです。vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。ストア内の状態を直接変更することはできません。ストア内の状態を変更する唯一の方法は、ミューテーションを明示的に送信 (コミット) することです。これにより、各状態の変更を簡単に追跡できるようになり、改善に役立つツールを実装できるようになります。私たちのアプリについてよく理解してください。

Vuex のミューテーションで非同期操作を実行できないのはなぜですか

ミューテーションの実行後は新しい状態変化に対応するため、devtools でビッグブラザーのスナップショットを保存し、タイムトラベルを実現できます。突然変異が非同期操作をサポートしている場合、状態がいつ更新されるかを知る方法がなく、状態を適切に追跡することができないため、デバッグが困難になります。

axios とは何ですか、その機能と一般的な構文は何ですか

axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。
フロントエンド用の最も人気のある ajax リクエストライブラリ。
React/Vue は ajax リクエストの送信に axios を使用することを公式に推奨しています
特徴：
すべての Promise API をサポートする Promise ベースの非同期 Ajax リクエストライブラリ
ブラウザとノードの両方が使用可能であり、XMLHttpRequestはブラウザ内で作成されます。
リクエスト/レスポンスインターセプターのサポート
サポートリクエストのキャンセル
リクエストデータとレスポンスデータを変換でき、レスポンス内容をJSON型データに自動変換
複数のリクエストをバッチ処理する
セキュリティが高く、クライアントは XSRF に対する防御をサポートしているため、各リクエストにはキーを取得するための Cookie が含まれており、ブラウザーの同一生成元ポリシーに従って、偽の Web サイトは Cookie 内のキーを取得できません。このようにして、バックグラウンドは、このリクエストが偽の Web サイトでのユーザーの誤解を招く入力であるかどうかを簡単に識別して、正しい戦略を採用できるようになります。
一般的な構文:
axios(config): あらゆる種類のリクエストを送信するための一般的/最も重要な方法
axios(url[,config]): 取得リクエストを送信するための URL を指定できます。
axios.request(url[,config]): axios(config) と同等
axios.get(url[,config]) 取得リクエストを送信
axios.delete(url[,config]) 削除リクエストを送信
axios.post(url[,data,config]) 投稿リクエストを送信
axios.put(url[,data,config]) put リクエストを送信
axios.defaults.XXX によって要求されたデフォルトのグローバル構成
axios.interceptors.request.use() ; リクエストインターセプターを追加します
axios.interceptors.response.use(); 応答インターセプターを追加します
axios.create([config]); axiosを新規作成します(以下の機能はありません)
axios.Cancel(); キャンセルリクエストの作成に使用されるエラーオブジェクト
axios.CancelToken(); キャンセルリクエストの作成に使用されるトークンオブジェクト
axios.isCancel(); リクエストのキャンセルはエラーですか
axios.all(promises) は、複数の非同期リクエストをバッチで実行するために使用されます。
axios.spread() : 成功したすべてのデータを受け取るコールバック関数を指定するために使用されるメソッド

SSR について何か知っていますか? SSR は主にどのような問題を解決しますか?

サーバーサイドレンダリング SSR (サーバーサイドレンダリングを意味します) と呼んでいます。サーバー側でページの HTML 構造の結合を完了し、ブラウザに送信し、ステータスをバインドするページ処理技術を指します。完全にインタラクティブなページプロセスになるようにイベントを追加します。
利点: SEO が容易、検索エンジンはページの HTML 構造を優先的にクロールします。SSR を使用すると、サーバーはビジネスに関連した HTML をすでに生成しているため、SEO に役立ちます。最初の画面のレンダリングにより、ユーザーは最初の画面をレンダリングする必要がありません。ページのすべての js.loading が完了するまで待ちます。ページビューを確認します (サーバーに負荷がかかるため、どれがサーバーによってレンダリングされ、どれがクライアントに渡されるかを考慮する必要があります)
短所: 複雑さ、このプロジェクトまたはそのプロジェクトの複雑さはパフォーマンスに影響します; サーバーの負荷が大きくなり、静的リソースのみを提供する必要があるフロントエンドとバックエンドの分離されたサーバーと比較して、サーバーの負荷が大きくなります。したがって、注意して使用してください。

Vue.権限管理のやり方、ボタンレベルで権限を制御する方法

もっと良いブログを持ってください
実際のプロジェクト: 会社には権限管理システムがあり、アクセス権、構成権限がコードに導入され、ボタン権限はカスタム命令を通じて v-if とともに使用されます。

Vue プロジェクトのフロントエンド開発環境リクエストのサーバー側インターフェイスの交差の問題

vue-cli 2.x バージョンの場合は、config フォルダーでサーバープロキシを構成します。
vue-cli 3.x バージョンの場合、フロントエンド構成サーバープロキシは vue.config.js で設定されます。たとえば、target の対応する属性値は、リクエストを送信するホスト + ポートです。バックエンドサーバー。意味は次のとおりです。フロントエンドがリクエストを送信するホスト + ポートは、マウントされたホストとポートに自動的に置き換えられるため、フロントエンドとサーバーの間でクロスドメインの問題は発生しません。フロントエンドホストポート。
ws: webScoket プロトコルを示します
changeOrigin: true; 元のドメイン名が変更されるかどうかを示します。これは true である必要があります。この方法では、クロスドメインの問題は発生しません。

どのような VUE パフォーマンスの最適化が行われたか:

コーディング段階: データ内のデータを最小化します。データ内のデータはゲッターとセッターを追加し、対応するウォッチャーが収集されます。v-if と v-for は一緒に使用されません。アンチシェイク、スロットリング。ルートの遅延読み込みを使用します。、非同期コンポーネント; 3 番目のモジュールはオンデマンドでインポートされます; 画像は遅延ロードされます; 長いリストは表示領域までスクロールされ、動的にロードされます; キーは一意であることが保証されます; SPA ページはキープアライブキャッシュコンポーネントを使用します; 必要な場合v-for を使用してイベントを各要素にバインドし、それをイベントプロキシとして使用します
SEO の最適化: サーバー側レンダリング SSR、プリレンダリング、
パッケージ化の最適化: 圧縮コード、ツリーシェーキング/スコープホイスティング、cdn を使用して 3 番目のテンプレートをロード、マルチスレッドパッケージング happypack、splitChunks によるパブリックファイルの抽出、sourceMap の最適化
vue 3.x について学んだことがありますか? vue 2.x と vue 2.x の違いを教えていただけますか?

素敵なブログを

Vue 3.0 で使用されるコンポジション API と Vue 2.x で使用されるオプション API の違いは何ですか

options API: コンポーネントオプション (データ、メソッド、プロパティなど) を記述するオブジェクトオプションが含まれています。API は複雑なコンポーネントを開発し、同じ機能ロジックのコードが異なるオプションに分割されます。mixin を使用して共通コードを再利用する場合にも問題があります。名前の競合など、データの出所が明確ではない
Compositon API: Vue 3 で追加された新しい API セット。コンポーネントのロジックをより柔軟に編成できる関数ベースの API です。大規模プロジェクトでオプション API を分割して再利用するのが難しいという問題を解決します。。

element-ui で発生した問題:

el-cascader の複数選択スタイルは IE では正常ではありません

カスケードセレクターの高さの問題
表の固定列に線が表示される

おすすめ