Vue の包括的な面接の質問

Vue の一般的なコマンドとその用途

v-if: 要素は true または false の値に従ってレンダリングされ、値が変化すると要素が作成または破棄されます。
v-show: true または false の値に応じて要素の表示と非表示を切り替えます。要素は破棄されません。
v-for: 配列またはオブジェクトに基づいてリストをレンダリングします。vue2.0 以降は次のキーとともに使用する必要があります。
v-bind: 1 つ以上の機能を動的にバインドします。以下のように省略されます。
v-on: 指定された要素の dom イベントをリッスンし、イベントリスナーをバインドするために使用されます (@ と省略できます)。
v-model: データの双方向データバインディングを実現します。
v-pre: この要素とその子要素のコンパイルプロセスをスキップします。
v-once: 要素とコンポーネントを 1 回だけレンダリングします。その後の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとみなされ、スキップされます。これを使用して、更新パフォーマンスを最適化できます。

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

データハイジャックをパブリッシャー/サブスクライバーモデルと組み合わせて使用すると、

Object.defineProperty() を通じて各プロパティのセッターとゲッターをハイジャックします。

データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスナーコールバックをトリガーします。

ルート内でジャンプしてパラメーターを渡すにはどのような方法がありますか?

宣言的なジャンプ:

1) パスでジャンプ

<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">クリックしてサブページを表示します</router-link>

2) 路線名でジャンプ

<router-link :to="{name: 'detail', params:{id: 'abc'}}">クリックしてサブページを表示します</router-link>

ファンクショナルジャンプ:

this.$router.push({パス: '/home/sort/detail',query:{id: 'abc'}})

パラメータを渡す方法:

Params 参：this.$router.push({ name:'user',params: { userId: 123 }})

名前付きルート、params は名前とともに使用する必要があります

クエリパラメータ: <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">クリックしてサブページを表示します</router-link>

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

父から息子へ:

親コンポーネントのカスタムパラメータ

<counter-com :num="10" str="abc"></counter-com>

サブコンポーネントはパラメータを受け入れます

小道具:{

"num":{タイプ:数値、デフォルト:1}、

}

子传父：

親コンポーネントのカスタムイベント

<counter-com @setNum=”setNum”></counter-com>

メソッド:{

setNum(データ){

コンソール.ログ(データ)

}

サブコンポーネントは $emit メソッドを通じてイベントをトリガーします

This.$emit(“setNum”,{name:”123”})

vuex を介してパラメータを渡す

イベントバス経由でパラメータを渡す

ルーティングガードの理解について話します (理解について言えば、一般的には合計スコア、それが何であるか、どこで使用されるか、何に使用されるか、どのように使用するか、どのような注意事項がプロジェクトの説明と組み合わされた方が良いかです)

ナビゲーションガードとも呼ばれるルーティングガードは、ルーティングジャンプ時にトリガーされるフック機能です。ルーティングのインターセプトやキャンセルなどの操作を実行できます。グローバルルーティングガード、コンポーネントルーティングガード、およびルーティング専用ガードに分かれています。主に使用されます。一部のページの認可認証は、ログイン情報を確認して許可・ブロックを判断し、

router.beforeEach((to,from,next)=>{
if(to.path == '/login' || to.path == '/register'){
次（）;
}それ以外{
alert('ログインしていません。まずログインしてください');
次('/ログイン');
}
})

Vuex の理解について話す

Vuex は状態管理モード + ライブラリです. すべてのコンポーネントの共通の状態を管理します. コンポーネントの入れ子が深すぎて値の受け渡しが難しい場合, vuex を使用して公開状態を管理できます. たとえば,ログイン状態時間の確認に同意します。

vuex には State Getter Mutation Action Module の 5 つのモジュールがあります

1) データは状態で定義され、どのコンポーネントでも呼び出すことができます。

this.$store.state.global データ名

2)ミューテーションは、ストア内の状態を変更する唯一の方法です。ビルドでミューテーション操作をトリガーするには、コミットを使用します。非同期操作は実行できません。

3) アクションは非同期操作を実行するモジュールですが、ミューテーションをトリガーすることによってのみ状態を変更できます。

this.$store.dispatch("asynAdd")

4) ゲッターは、vue で計算されるものと同様で、ストア内のデータをキャッシュし、処理して新しいデータを形成します。

5) モジュール、データ量が多い場合、vuex は非常に肥大化して見えるため、モジュールを使用してモジュールセグメンテーションを実行できます。各モジュールには個別の状態、ミューテーション、アクション、ゲッター、およびモジュールがあります。

ミキシングの理解について話す

mixin でミックスします。mixins は js オブジェクトです。コンポーネントのスクリプト項目に任意の関数オプションを含めることができます。コンポーネントが mixins オブジェクトを使用すると、mixins オブジェクトのすべてのオプションがコンポーネント自体のオプションに混合されます。これによりコードの再利用性が向上し、コードの保守が容易になります。

複数のコンポーネントに非常に類似したデータや関数がある場合、ミックスインを使用して共通部分を抽出することができ、コンポーネントはミックスインによってカプセル化された関数を通じてそれらを呼び出します。

混合された値またはオプションが競合する場合、コンポーネント自体の値が混合された値をオーバーライドし、混合されたオプションがコンポーネント自体のオプションよりも先に呼び出されます。

スロットの理解について話す

コンポーネントをカプセル化する場合、不確実な部分をスロットとしてカプセル化し、呼び出し時に判断することができます。スロットは名前付きスロットと匿名スロットに分かれます。匿名スロットを定義する場合は、<slot></ を定義するだけで済みます。 slot> を使用すると、コンポーネントの値がスロットに渡されます。

<テンプレート>

<h1>これは子供向けのページです</h1>

<スロット></スロット>

</div>

</テンプレート>

コンポーネントに複数のスロットがある場合は、名前付きスロットを使用し、name を使用して名前を指定する必要があります。

<テンプレート>

<h1>これは子供向けのページです</h1>

<スロット名="one"></スロット>

</div>

</テンプレート>

<テンプレート>

<h1>これは親ページです</h1>

<子供たち>

<テンプレート v-スロット:1>

</テンプレート>

<テンプレート v スロット:2>

2つのスロット

</テンプレート>

</子供>

</div>

</テンプレート>

クロスドメインとは何か、そしてその解決方法

ブラウザの同一オリジンポリシーでは、jsのインタラクションは同一ドメイン内でのみ行うことが規定されており、リクエストURLのプロトコル、ドメイン名、ポートのいずれかが現在のページURLと異なる場合、クロスドメインとなります。

解決策: プロキシを構成してブラウザの同一生成元ポリシーをバイパスする

梱包リクエストの経験について話す

axios を Promise オブジェクトにカプセル化し、必要なリクエスト構成の同意をメソッドにカプセル化すると、リクエストメソッドを呼び出した後、非常に便利に使用でき、冗長な操作を行わずに多くのコードを節約できるため、コードがクリーンで保守しやすくなります。高凝集性と低結合性の特性に合わせて可読性と再利用性が向上

おすすめ