Web フロントエンド面接高頻度テストサイト - Vue 面接の質問

次の質問に対する詳細な回答については、次のリンクを参照してください。

コンテンツ	参考リンク
Vueの基本的な使い方	Vue の基本的な使い方 (Vue の最も基本的な知識ポイントをマスターするための 1 つの記事)
Vue通信と高度な機能	Vue コンポーネントと高度な機能間の通信 (さまざまなコンポーネント、カスタム v-model、nextTick、スロット間の通信)
Vue の高度な機能	Vue の高度な機能 (動的コンポーネント、非同期ロード、キープアライブ、ミックスイン、Vuex、Vue-Router)
ビューの原則 1	Vue の原理 (MVVM モデルの理解、データ変更の詳細/監視、配列変更の監視、仮想 DOM の詳細な理解)
ビューの原則 2	Vue の原則 (diff アルゴリズム、テンプレートのコンパイル、コンポーネントのレンダリングと更新、JS 実装のルーティング)

---

---

1. v-show と v-if の違い

• v-show コントロールは、CSS ディスプレイを介して表示および非表示にします
• v-if コンポーネントは、表示および非表示ではなく、実際にレンダリングおよび破棄します
• 表示状態を頻繁に切り替える場合は v-show を使用し、それ以外の場合は v-if を使用します

2. v-for でキーを使用する理由

• キーを使用する必要があり、インデックスおよびランダムにすることはできません
• diffアルゴリズムではsameNodeかどうかをタグとキーで判断
• レンダリング時間を短縮し、レンダリング パフォーマンスを向上させる

3. Vue コンポーネント (親子コンポーネント) のライフサイクルを記述する

• 単品ライフサイクル図（公式サイトより）
  

• 親子コンポーネントのライフサイクル関係

4. Vue コンポーネントの通信方法 (共通)

• 親子コンポーネントの小道具と this.$emit
• カスタム イベントevent.$on event.$off event.$emit
• vuex

5. コンポーネントのレンダリングと更新のプロセスを説明する

• vue 原則の 3 つのモジュール: レスポンシブ、vdom と diff、テンプレートのコンパイル

6. 双方向データバインディング v-model の実現原理

• 入力要素の値 = this.name
• 入力イベント this.name = $event.target.value をバインドします
• データ更新トリガー再レンダリング

7. MVVM の理解

8. 計算機の特徴

• キャッシュされ、データは変更されず、再計算されません
• 性能を上げる

9. コンポーネントデータが関数でなければならない理由

• 実際、.vueファイルはクラスとして書かれています
• どこでもコンポーネントを使用する場合、インスタンス化するのと同じです
• インスタンス化時にデータを実行します。データが関数でない場合、各コンポーネント インスタンスのデータは共有されます。

10. ajax リクエストはどのライフサイクルに配置する必要がありますか?

• マウント済み (コンポーネントのレンダリングが完了し、DOM のロードが完了しました)
• JS はシングル スレッドであり、ajax は非同期でデータをフェッチします。
• マウントする前に配置しても意味がありません。ロジックが混乱するだけです。

11. コンポーネントのすべての props を子コンポーネントに渡す方法

• $小道具

<User v-bind = "$props">

12. v-model を自分で実装する方法

• v-model を使用する場合と使用:valueしない場合
• 変更とmodel.event名が対応可能

<template>
  <input
    type="text"
    :value="text"
    @input="$emit('change', $event.target.value)"
  />
</template>

<script>
export default {
    
    
  model: {
    
    
    prop: "text", //对应到 props text
    event: "change",
  },
  props: {
    
    
    text: String,
  },
};
</script>

13. 複数のコンポーネントが同じロジックを持っています。それらを分離する方法は?

参考リンク

• 混入します
• およびミックスインのいくつかの欠点

14. 非同期コンポーネントを使用するのはいつですか?

• 大きなコンポーネントをロードする
• ルートは非同期的にロードされます

15. キープアライブを使用する場合

• コンポーネントをキャッシュし、再レンダリングする必要はありません
• 複数の静的タブページの切り替えなど
• パフォーマンスを最適化する

16. beforeDestory を使用する場合

• カスタム イベント event.$off をバインドします。
• クリアタイマー
• ウィンドウ スクロールなどのカスタム DOM イベントをバインドします。

17.スコープスロットとは何ですか?

• スロットのコンテンツは、親のドメインと子のドメインの両方からのデータを使用したい場合があります

親コンポーネント:

• 親コンポーネントの URL を使用 && 子コンポーネントのタイトル

<template>
  <div>
    <ScopedSlot :url="website.url">
      <template v-slot="slotProps">
        {
    
    {
    
     slotProps.slotData.title }}
      </template>
    </ScopedSlot>
  </div>
</template>

サブアセンブリ:

<template>
  <a :href="url">
    <slot :slotData="website">
      {
    
    {
    
     website.subTitle }}
    </slot>
  </a>
</template>

18. Vuex でのアクションとミューテーションの違いは何ですか?

• 非同期はアクションで処理できますが、ミューテーションでは処理できません
• ミューテーションはアトミック操作を行います
• アクションは複数の突然変異を統合できます

19. Vue-router の一般的なルーティング パターン

• hsah モード
• H5 履歴 (サーバーのサポートが必要)
• 両者の比較

20. 非同期にロードするように Vue-router を設定する方法

component: () => import './xxx'

21. vnode で DOM 構造を記述する

DOM構造

<div id="div1" class="container">
    <p>vdom</p>
    <ul style="font-size: 20px">
        <li>a</li>
    </ul>
</div>

vnode フォーム

{
    
    
  tag: 'div',
  props: {
    
    
    className: 'container',
    id: 'div1'
  }
  children: [
    {
    
    
      tag: 'p',
      children: 'vdom'
    },
    {
    
    
      tag: 'ul',
      props: {
    
    style: 'font-size: 20px'}
      children: [
        {
    
    
          tag: 'li',
          children: 'a'
        }
      ]
    }
  ]
}

22. データ変更を監視するためのコア API は何ですか?

• Object.defineProperty
• と深い監視、監視配列
• しかしデメリットもあります

23. Vue はどのように配列を監視しますか?

• Object.defineProperty は配列の変更を監視できません
• プロトタイプの再定義、push pop などのメソッドの書き換え、モニタリングの実装
• プロキシは、アレイの変更の監視をネイティブにサポートできます

24.応答性の原則を説明してください

• データ変更の監視
• コンポーネントのレンダリングと更新プロセス

25. 差分アルゴリズムの時間計算量

• の上）
• O(n^3) の上にいくつかの調整を行いました

26.差分アルゴリズムのプロセスを簡単に説明してください

• patch(elem, vnode) および patch(vnode, newVnode)
  - patchVnode および addVnodes および removeVnodes
• updateChildren (キーの重要性)

27. Vue の非同期レンダリングはなぜですか? $nextTick の用途は何ですか?

• レンダリングのパフォーマンスを向上させるための非同期レンダリング (およびデータ変更の組み込み)
• $nextTick は、DOM が更新された後にコールバックを起動します

28. Vue の一般的なパフォーマンス最適化方法

• v-show と v-if の合理的な使用
• 計算の合理的な使用
• v-for のときにキーを追加し、v-if での使用を避ける
• カスタム イベントと DOM イベントのタイムリーな破棄
• 非同期コンポーネントを賢く使用する
• キープアライブの合理的な使用
• データレベルは深すぎてはいけません
• vue-loader を使用して、開発環境でテンプレートのコンパイル (事前コンパイル) を行います
• webpack レベルでの最適化
• 画像の遅延読み込みなど、フロントエンドの一般的なパフォーマンスの最適化

不积跬步无以至千里，不积小流无以成江海

クリックしてフォローし、迷子にならないように、更新を続けてください...