フロントエンドのインタビューメモ - vue

序文
他の

序文

ここでは、Vue の面接に関するいくつかの質問をまとめました。よくある質問、よくある質問、私が実際に経験した質問をまとめました。不足している点がございましたら、ご指摘ください。更新は続けています... (追記: 1 ～ 3 ⭐ は重要性、⭐ 選択的理解、⭐⭐ 熟達、⭐⭐⭐ フロントエンドが知っておく必要がある知識を表します)
ここに画像の説明を挿入します

1. 双方向データバインディングの原則 ⭐⭐⭐

回答: パブリッシュ/サブスクライブモードと組み合わせたデータハイジャックにより、Object.defineProperty() を通じて各プロパティの get メソッドと set メソッドを定義し、データ変更時にサブスクライバーにメッセージをパブリッシュし、対応するイベントコールバックをトリガーします。

2. VUE ライフサイクル⭐⭐⭐

概念: Vue インスタンスの作成、データの初期化、テンプレートのコンパイル、DOM のマウント、レンダリング - 更新 - レンダリング、アンインストールなどの一連のプロセスを Vue インスタンスのライフサイクルと呼びます。

ビュー2.0

beforeCreate : 作成前。この時点では、コンポーネントインスタンスが作成されたばかりで、データの観測やイベントの設定はまだ行われておらず、データは取得できません。
created : 作成が完了しました。vue インスタンスはデータの観察、属性とメソッドの計算を完了しています ( props、メソッド、データ、computed、watch などはこの時点で取得されています)。DOMにマウントされておらず、el 属性にアクセスできません。el 属性空の配列は、単純な Ajax リクエストやページの初期化によく使用されます。
beforeMount : マウント前。ハングは開始前に呼び出され、関連するレンダリング関数が初めて呼び出されます (仮想 DOM)。テンプレートをコンパイルし、data と template 内のデータから html を生成し、el と data の初期化を完了します。この時点ではhtml はページに添付されていないことに注意してください。
実装済み: 実装が完了しました。つまり、テンプレート内の HTML が HTML ページにレンダリングされます。このとき、DOM API を通じて DOM ノードを取得できます。$ref 属性にアクセスでき、VNode 情報と操作を取得するためによく使用されます。Ajax リクエストそしてマウントは一度だけ実行されます。
beforeUpdate : データが更新される前に呼び出されます。これは、仮想 DOM が再レンダリングされてパッチが適用される前に発生し、追加の再レンダリングプロセスはトリガーされません。
updated : 更新後。データ変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されます。
beforeDestroy ; 破壊前。インスタンスが破棄される前に呼び出されると、インスタンスは引き続き完全に使用可能になります。(通常、コンポーネント内のタイマーや監視されている DOM イベントのクリアなど、いくつかのリセット操作がこのステップで実行されます)
破壊された: 破壊された後。インスタンスが破棄された後に呼び出されます。呼び出し後、vue real 列で示されるすべてのバインドが解除され、すべてのイベントリスナーが削除されます。
その他:
activate : keep-alive コンポーネントがアクティブ化されたときに呼び出されます
deactivated : keep-alive コンポーネントが非アクティブ化されたときに呼び出されます
詳細は、vue2.0 公式 Web サイトのライフサイクルフックを参照してください。

ビュー3.0

onBeforeMount
マウント済み
onBeforeUpdate
更新済み
onBeforeUnmount
アンマウント済み

画像の説明を追加してください
詳細はvue3.0公式サイトのライフサイクルフックをご覧ください。

3. コンポーネント間で値を転送する方法 ⭐⭐⭐

1. Vueの親コンポーネントと子コンポーネントの間で値を転送する

子コンポーネントは props を通じてデータを受け取り、$emit親コンポーネントのカスタムイベントをトリガーします。

2. 兄弟コンポーネント間の値の転送

パブリックコンポーネントbus.jsを構築します。配信側はイベントによってトリガーされますbus.$emit。レシーバーは、mounted(){} ライフサイクルでトリガーされますbus.$on。

3. VUEX を介してコンポーネント間でパラメーターを渡すことができます。

4. 父から孫へ受け継がれる価値$attrs（下）$listeners（上）

5. 先祖や子孫からの継承を大切にするprovide/inject

6.this.$parent
親コンポーネントのインスタンスの詳細を取得するには、vue コンポーネントのパラメータの受け渡しメソッドを参照してください。

4. v-model⭐⭐の役割と実装原理

機能: v-model は本質的に単なる糖衣構文であり、v-model ディレクティブを使用してフォームと要素に双方向のデータバインディングを作成できます。

実装原理:
v-bind: 応答データをバインドし、
oninput イベントをトリガーしてデータを転送します。

5. VUEX⭐⭐について話す

原則: Vuex は、vue.js アプリケーション用に特別に設計された状態管理ツールです。
構成するもの:

state : vuex の基本データ。変数を格納するために使用され、格納されたデータは応答します。
mutations : 変更されたデータを送信し、ステータスを同期的に更新します。
アクション: 非同期的に操作できるミューテーションを送信します。
getters : ストアの計算されたプロパティです。
modules : モジュール。各モジュールには 4 つの属性があります。
VUEXの使い方については、VUEの値受け渡し問題をご覧ください。

6. VUEX ページを更新するときにデータが失われる問題を解決するにはどうすればよいですか? ⭐⭐

理由: vuex 内のデータは実行メモリに保存されているため、ページが更新されると、ページは vue インスタンスを再ロードし、vuex 内のデータはクリアされます。

解決策: vuex のデータをブラウザーのキャッシュに直接保存します。

別の方法: プラグインを使用しますvuex-persistedstate。
vuex-persistedstate は、Vuex ストアの状態をブラウザの localStorage または sessionStorage に永続化できるため、ユーザーは次回ページを開いたときに以前のアプリケーションの状態を引き続き使用できます。

7.計算と監視の違いは何ですか? ⭐⭐⭐

計算された値はキャッシュされ、トリガー条件は依存する値の変更です。Watch にはキャッシュがなく、非同期の監視データ変更がサポートされます。

computed : 他の属性値に依存する計算された属性であり、計算された値はキャッシュされます。依存する属性値のみが変更され、計算された値は次回計算された値が取得されたときに再計算されます。見てください:
詳細監視関数は、特定のデータの監視コールバックと同様に、非同期をサポートします。監視対象のデータが変更されるたびに、後続の操作に対してコールバックが実行されます。

Computedアプリケーションシナリオ: 数値計算が必要で他のデータに依存する場合、computed のキャッシュ機能を使用して値を取得するたびに再計算を回避できるため、computed を使用する必要があります。監視アプリケーションシナリオ:
データの変更 Watch は、非同期または高価な操作に使用する必要があります。watch オプションを使用すると、非同期操作 (API にアクセス) を実行し、操作の実行頻度を制限し、最終結果を取得する前に中間状態を設定できます。これらは、計算されたプロパティでは実行できないことです。

詳細については、Vue の計算プロパティ、メソッド、ウォッチの違いを参照してください。

8. axios をカプセル化するにはどうすればよいですか? ⭐

この記事は実際のプロジェクトの状況に基づいてよく書かれており、Vue での axios の簡単なカプセル化を確認することができます。

9.ルートとルーターの違い⭐

Route : は、「パス、パラメータ、ハッシュ、名前」およびその他のルーティング情報パラメータを含むルーティング情報オブジェクトです。
Router : ルーティングジャンプメソッド、フック関数などを含むルーティングインスタンスオブジェクトです。

10.v-showとv-if⭐⭐の違い

v-if : コンポーネントの破棄と再構築。権限のある操作により適しており、高に切り替えます。開始条件が false の場合は何も行われず、true の場合にのみコンパイルされます。
v-show : cssの切り替え、非表示、表示は頻繁に切り替える場合に適しています。いずれの場合も、コンパイルされてからキャッシュされ、DOM 要素は保存されます。(v-show = false は表示なしを意味します。true は表示を意味します)

11.Vue のデータが変更されたのにビューが最新ではないという問題を解決するにはどうすればよいですか? ⭐

理由：

配列データの変更: 特定のメソッドを使用して配列を操作します。データを変更する場合、一部のメソッドは Vue で監視できなかったり、配列の長さが変化したりします。
(push()、pop()、shift()、unshift()、splice()、sort()、reverse()) は元の配列を変更しませんが、新しい配列を返し、ビューは自動的に更新されません。
Vue はオブジェクトプロパティの追加または削除を検出できません。
非同期更新キュー: 初回はデータが取得されてレンダリングされますが、2 回目以降はページが再度レンダリングされたときにのみデータが更新され、リアルタイムで更新することはできません。

解決策: 配列の長さの変更はスプライスで変更できます。特定の属性の変更を監視する必要がある場合は、$set を使用してください。

12.Vue のデータはなぜオブジェクトではなく関数なのでしょうか? ⭐⭐

公式サイトにこのような紹介があります詳細はコンポーネントの再利用をご覧くださいこれは、コンポーネントが
ここに画像の説明を挿入します
Vue で再利用できることを意味し、データが関数の場合、各インスタンスのデータは独立しており、相互作用しませんお互いに影響を及ぼします。

より詳しい説明==>
画像の説明を追加してください

13. VUE では、親子コンポーネントが値を渡すときに、親コンポーネントが非同期でリクエストを行うため、子コンポーネントをリアルタイムで更新できません。(VUEのデータがリアルタイムに更新できない問題の解決方法は？) ⭐⭐⭐

まずは親コンポーネントと子コンポーネントのライフサイクルの実行順序を理解します ==>
レンダリングデータの読み込み処理
親コンポーネント beforeCreate -->
親コンポーネント作成 -->
親コンポーネント beforeMount -->
子コンポーネント beforeCreate -->
子コンポーネント作成 -->
子コンポーネント beforeMount -->
サブコンポーネントがマウント -->
親コンポーネントがマウント -->
理由: ライフサイクルは 1 回だけ実行されるため、非同期リクエストが行われるまでデータを取得できないため、サブコンポーネントのマウントされたフックが実行すると、親コンポーネントはまだ取得されていません。データは渡されますが、結果を出力する必要があります。この場合、props のデフォルト値は空の文字列のみを出力できるため、出力結果は空の文字列になります。
解決：

v-if を使用してコンポーネントのレンダリングのタイミングを制御します。
最初にバックエンドインターフェイスの非同期データが取得されていない場合、コンポーネントはレンダリングされず、コンポーネントが取得されたときに再度レンダリングされます。v-if="variable" を使用して制御し、最初にこの変数を false に設定します。この場合、サブコンポーネントはレンダリングされません。データが取得されたら、この変数を true に設定します。例
:

  data() {
    
    
    return {
    
    
      isTrue:false // 初始为false
    };
  },
  monted(){
    
    
  this.$post.a.b.c.getData(res=>{
    
    
        if(res.result){
    
    
            this.isTrue = true
         }
     })
  }

watch を使用してデータの変更を監視します
。例:

  props: {
    
    
    tableData: {
    
    
      type: Array,
      default: [],
    },
  },
  watch: {
    
    
     tableData(val){
    
    
         console.log(val)
     }
  },

VueXの使用

14. 複数のパラメータを親子コンポーネントのエミットに渡すにはどうすればよいですか? ⭐

サブアセンブリ:

submit(){
    
    
	this.$emit('g',1,2,3,4,5)
}

親コンポーネント

g(val1,val2,val3,val4,val5) {
    
    
	console.log(val1,val2,val3,val4,val5)
}

15.VUEルーティングジャンプ方法⭐⭐

ルーターリンクラベルジャンプ
this.$router.push()
this.$router.replace()
this.$router.go(n) : (0: 現在のページ、-1 前のページ、+1 次のページ、n は整数を表します)

16. 条件付きレンダリング v-if および v-for 優先 ⭐

vue2.0ドキュメントには次のように書かれています:
ここに画像の説明を挿入します
vue2 リストレンダリングガイド

vue3.0 のドキュメントには、 vue3 の条件付きレンダリングについて次のことが記載されています。
ここに画像の説明を挿入します

17. VUE の $nextTick の機能と原理は何ですか? ⭐⭐⭐

非同期レンダリング、DOM、Promiseの取得など。

Vue はDOM の更新時に非同期で実行されます。データを変更した後、ビューはすぐには更新されません。代わりに、同じイベントループ内のすべてのデータ変更が完了した後にビューが均一に更新されます。したがって、データを変更した後、すぐにメソッドで DOM を取得します。取得された DOM は変更されていない DOM のままです。
$nextTick の機能は次のとおりです。このメソッドのコードは、現在のレンダリングが完了した後に実行されます。これにより、更新された DOM を取得できない非同期レンダリングの問題が解決されます。
$nextTick の原理: $nextTick の本質は Promise を返すことです。

アプリケーションシナリオ:

created()内でDOMを取得して操作したい場合は$nextTickにDOMを操作するメソッドを記述します。
data()での変更後はページ内でdataの変更データを取得できませんが、$nextTickを使用するとdata内のデータが変更された際にリアルタイムでページを描画することができます。

公式サイトにはこう書いてあります
ここに画像の説明を挿入します

18.VUE の for ループでキーが追加されるのはなぜですか? ⭐⭐

パフォーマンスの最適化のために diff アルゴリズムを最適化します。Vue は仮想 DOM であるため、DOM を更新するときに diff アルゴリズムを使用してノードを 1 つずつ比較します。たとえば、li 要素が多数ある場合は、li 要素を最初の部分に挿入する必要があります。特定の位置にキーが追加されていない場合、操作中にすべての li 要素が再レンダリングされますが、キーがある場合は、キーに従って li 要素を 1 つずつ比較します。新しい li 要素を作成して挿入します。他の要素を変更して再レンダリングする必要はありません。
キーを li 要素のインデックスにすることはできません。配列の前に新しい要素を挿入すると、その添え字は 0 になり、元の最初の要素で繰り返され、配列全体のキーが変更されるためです。と同じですキーがない場合も状況は同じです。

19.VUE2とVUE3の違いは何ですか? ⭐⭐⭐

双方向データバインディングの原則は異なります。Vue2
の双方向データバインディングは、Object.definePropert() を使用してデータをハイジャックし、パブリッシュ/サブスクライブモードと組み合わせることで実装されます。
Vue3 はプロキシ API を使用してデータをプロキシします。
API タイプが異なります
。Vue2 はオプションタイプ API を使用します。
Vue3 は合成 API を使用します。
データ変数やメソッドの定義とは異なり、
Vue2 はデータを data に置きます。
Vue3 は新しい setup() メソッドを使用する必要があります。
さまざまなライフサイクル
父と息子は異なるパラメーターを引き継ぎます
スロットとは説明が異なります
フラグメンテーションをサポートするかどうか
Vue2 はフラグメンテーションをサポートしません。
Vue3 は断片化をサポートしており、複数のルートノードを持つことができます

20.なぜ VUE3 は $set を使い続けないのですか? ⭐

$set の役割: vue2.0: オブジェクトと配列を使用してデータを定義します。プロパティまたは要素をオブジェクトまたは配列に追加する必要があり、ビューの更新時に応答して更新したい場合は、 $ を使用する必要があります。完了するメソッドを設定します。
Vue2 は object.defineProperty を使用してデータ応答を実装しますが、深いデータの変更を監視することはできません。

Vue3 では Proxy を使用して、 ref および reactive を介してデータをプロキシし、値とオブジェクトタイプを応答性の高いオブジェクトに変更します。これにより、その変更と追加が Vue によってキャプチャされ、それによってページの自動更新が実現されます。
ビュー2
ビュー3

公式サイトのレスポンシブ基本を参照

21.VUEルーティングにおけるヒストリーとハッシュの違い⭐⭐

アドレスバーに「#」の有無にかかわらず
ハッシュ:http://localhost:8080/#/
履歴:http://localhost:8080/
これらはすべて、ブラウザーの 2 つの機能を使用してフロントエンドルーティングを実装し、
履歴は閲覧履歴スタックの API を使用して
ハッシュを実装します。これは、場所オブジェクトのハッシュ値変更イベントを監視することによって実装されます。
同じ URL
履歴がブラウザ履歴スタックに追加されるようにトリガーされます。ハッシュはトリガーされません。
履歴にはバックエンドの協力が必要です。バックエンドがページの更新に協力しない場合、 404が表示されます。ハッシュは必要ありません。

hashRouter の原則: window.onhashchangeを通じてURL のハッシュ値を取得します
historyRouter の原則: history.pushStateを通じて、それを使用してページにジャンプしてもページの更新はトリガーされません。window.onpopstateを使用してブラウザの前後の動きを監視します。

ここに画像の説明を挿入します

詳細については、さまざまなヒストリカルモード | Vue Router の公式 Web サイトをご覧ください。

22.ピニアとVuexの違い⭐

オプションAPIと複合APIをサポート
Pinia には突然変異はなく、状態、ゲッター、およびアクションのみがあります。
pinia サブモジュールにはモジュールは必要ありません
TypeScript のサポート
自動化されたコード分割
ピニアは小さい
pinia は状態データを直接変更できます

参考https://github.com/vuejs/rfcs/pull/271

23.Vue Diffアルゴリズム⭐

コンポーネントが作成および更新されると、Vue は内部更新関数を実行します。この関数は、レンダリング関数を使用して仮想 DOM ツリーを生成し、古いツリーと新しいツリーを比較して相違点を見つけ、最終的に実際の DOM を更新します。

違いを比較するプロセスはdiffと呼ばれ、Vue は patch と呼ばれる関数を通じてこのプロセスを内部で完了します。

比較する場合、Vue は深さ優先と同じレイヤー比較を使用して比較します。

2 つのノードが同じかどうかを比較する場合、Vue は仮想ノードのキーとタグに基づいて判断します。

まず、ルートノードを比較し、同じであれば、古いノードに関連付けられた実domの参照を新ノードにマウントし、必要に応じて実domの属性を更新し、その子ノードの配列を比較します。この情報はすべての実 DOM を再帰的に作成し、それを対応する仮想ノードに同時にマウントし、古い DOM を削除します。

子ノード配列を比較するとき、Vue は各子ノード配列に対して 2 つのポインターを使用します。先頭と末尾をそれぞれポイントし、比較のために中央に近づき続けます。その目的は、実際の DOM をできるだけ再利用し、実際の DOM の作成と破壊をできるだけ少なくすることです。一致する場合はルートノードと同じ比較処理に入り、異なる場合は実DOMを適切な位置に移動します。

この再帰的な走査は、ツリー全体が比較されるまで続きます。

Vue の最適化戦略
Vue の差分アルゴリズムには、不必要な diff 演算を削減し、diff パフォーマンスを向上させるためにいくつかの最適化戦略が導入されています。

テンプレートのコンパイル中の静的ノードのマーキング
Vue がテンプレートをコンパイルするとき、変更する必要のない静的ノードにマークを付けるため、後続のレンダリングでこれらのノードの差分操作を省略できるため、差分の複雑さが軽減され、改善されます。パフォーマンス。
リスト走査のためのキー値の最適化
Vue では、リストを走査するとき、通常、各子要素にキー値を指定して、後続の差分操作を容易にするために子要素を一意に識別します。このプロセス中に、Vue は古いノードと新しいノードが変更されたかどうかを比較するためにキー値を記録し、変更がない場合は、不要な繰り返しレンダリングを避けるために、ノードの対応する状態が保持されます。
同じノードのマージ最適化
diff アルゴリズムでは、古いノードと新しいノードが同じノード (つまり、両方のノードが同じラベルと属性を持つ) で、どちらの子ノードも更新する必要がない場合、2 つのノードは次のようにみなされます。このノードの差分操作をスキップして、差分のパフォーマンスを向上させることができます。

Vue の差分アルゴリズムは、古いノードと新しいノードの違いを迅速に比較し、ページビューを迅速に更新して、ユーザーエクスペリエンスとプログラムのパフォーマンスを向上させる、効率的なフロントエンド応答実装です。

24. 動的コンポーネントと非同期コンポーネント⭐

動的コンポーネントと非同期コンポーネントはどちらも、コンポーネントの動的なレンダリングとオンデマンドの読み込みを実現するように設計されており、これによりアプリケーションのパフォーマンスと柔軟性が向上します。
動的コンポーネント: コンポーネントをレンダリングするときに、特定の条件に基づいてコンポーネントを動的に選択します。
ここに画像の説明を挿入します
非同期コンポーネント: コンポーネントの読み込みとレンダリングのプロセスは 2 つの部分に分かれています。つまり、最初にコンポーネントのコードと依存関係が読み込まれ、次に読み込みが成功した後にそれらがページに表示されます。これにより、初期読み込み時にすべてのコンポーネントのコードと依存関係が一度に読み込まれることがなくなり、ページのパフォーマンスと応答性が向上します。Vue では、ファクトリ関数とコンポーネントの非同期読み込み機能を使用して、コンポーネントの非同期読み込みを実装できます。
公式サイト参照
vue2 非同期コンポーネント
 vue3 非同期コンポーネント

25. イベント修飾子⭐

.stop : クリックイベントが伝播し続けるのを防ぐ
.Prevent : イベントを送信し、ページをリロードしない
.capture : イベントリスナーを追加するときにイベントキャプチャモードを使用する
self : 現在の要素自体が呼び出されたときにハンドラー関数がトリガーされます。 Once
: 1 回だけトリガーされます
Passive : モバイル端末のパフォーマンスを向上させます。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

詳細は公式サイトのイベントモディファイアをご覧ください。

26. ルート間でパラメータを転送する方法⭐

ルーターリンク経由のナビゲーションジャンプ配信

<router-link to=`/a/${
      
      id}`>routerlink传参</router-link>

プッシュメソッドを使用して、ジャンプ時にパラメータを結合してキャリーします。

  this.$router.push({
    
    
          path: `/getlist/${
      
      id}`,
        })

ルーティング属性の名前を通じて一致するルートを特定し、params を通じてパラメータを渡します。

this.$router.push({
    
    
          name: 'Getlist',
          params: {
    
    
            id: id
          }
        })

パスを使用してルートを照合し、クエリを通じてパラメータを渡します。

this.$router.push({
    
    
          path: '/getlist',
          query: {
    
    
            id: id
          }
        })

注: query はajax のgetリクエストに似ており、params はpostリクエストに似ています。

params はアドレスバーにパラメータを表示せず、ページを更新してもパラメータは失われます。
他のメソッドは渡されたパラメータをアドレスバーに表示し、ページを更新してもパラメータは失われません。

詳細については、Vue-router の 3 つの単純なルーティングパラメータの受け渡し方法を参照してください。

他の

その他のフロントエンドの面接の質問については、これを読むことができます

フロントエンドのインタビューの質問 (回答付き) は改善されています...

フロントエンドのインタビューの質問 - vue の記事