Vue3 選りすぐりの面接問題

あなたはどのような Vue 3 の新機能を知っていますか？#

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

Vue 3 ではコンポーネントインスタンスをどのように取得しますか？テンプレート参照名をどのようにカスタマイズしますか？#

Vue 3 における ref と reactive の違いは何ですか？#

Vue 3 ではリアクティブオブジェクトを分解してもリアクティブ性を失わないようにするには？#

answer

参考返信：

Vue 3 が提供するツール関数：toRefs を使用できます。

const state = reactive({
  count: 0,
  message: 'こんにちは、Vue 3！'
});
const { count, message } = toRefs(state);

Vue 3 プロジェクトでのクロスオリジン問題をどのように処理しますか？#

answer

参考返信：

バックエンドで CORS を有効にしてクロスオリジンを許可
vite.config.js でプロキシを設定；最も一般的

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
}

Vue 3 では動的コンポーネントをどのように実現しますか？#

Vue 3 にはどのようなイベント修飾子がありますか？#

answer

参考返信：

修飾子	作用
stop	event.stopPropagation () を呼び出し、イベントのバブリングを防止
prevent	event.preventDefault () を呼び出し、デフォルトのイベント動作（フォーム送信など）を防止します。
capture	イベントをバブリングフェーズではなくキャプチャフェーズでトリガーします
self	イベントの発生源が現在の要素である場合のみイベントをトリガーし、子要素のイベントはトリガーしません
...

Vue 3 のトップレベル setup でコンポーネント名をどのように定義しますか？#

answer

参考返信：

3.3+ でサポートされている defineOptions()
プラグイン unplugin-vue-setup-extend-plus を使用

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

Vue 3 のトップレベル setup で子コンポーネントの変数やメソッドをどのように取得しますか？#

スコープスロットとは何ですか？#

answer

参考返信：

子コンポーネントがデータやメソッドを親コンポーネントに公開し、親コンポーネントで動的にコンテンツを生成できるようにします。

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

コンポーネント間のトランジションアニメーションをどのように実現しますか？#

Vue 3 のスタイルスコープで "深く" 選択するには？#

Vue 3 で一度きりの監視と深い監視をどのように実現しますか？#

answer

参考返信：

設定を通じて

watch(
  source,
  (newValue, oldValue) => {
    // `source` が変化したときに一度だけトリガーされます
  },
  { once: true, immediate: true }
)

keep-alive の具体的な用途と実装原理は？#

カスタムディレクティブをどのように実現しますか？#

Vue 3 の Teleport とは何ですか？どのように使用しますか？#

answer

参考返信：

Teleport はコンポーネントの DOM をコンポーネントツリーの外の任意の位置にレンダリングすることを許可します。これにより、Vue コンポーネントの DOM 階層のネスト制限の問題を解決し、モーダル、通知、ツールチップなどのコンテンツを HTML ドキュメントの任意の位置にレンダリングできます。

<template>
  <div>
    <h1>メインコンテンツ</h1>
    <teleport to="body">
      <div class="modal">これはモーダルです</div>
    </teleport>
  </div>
</template>

Vue 3 の Suspense とは何ですか？#

answer

参考返信：

非同期コンポーネントの読み込みプロセスを処理するために使用されます。非同期タスク（データの読み込みや非同期コンポーネントの解析）が完了する前に、プレースホルダーコンテンツ（fallback）を表示することを許可し、ユーザーエクスペリエンスを向上させます。

<template>
  <div>
    <h1>Suspense の例</h1>
    <Suspense>
      <!-- デフォルトスロット：読み込み完了後に表示される内容 -->
      <template #default>
        <AsyncComponent />
      </template>

      <!-- プレースホルダースロット：読み込み中に表示される内容 -->
      <template #fallback>
        <p>読み込み中...</p>
      </template>
    </Suspense>
  </div>
</template>

Pinia と Vuex の違いは何ですか？#

vue-router の params と query の違いは何ですか？#

ルートの遅延読み込みをどのように実現しますか？#

answer

参考返信：

ルートの遅延読み込みは、ルートに対応するコンポーネントを必要に応じて読み込む方法で、初回の読み込み時間を大幅に最適化し、アプリケーションのパフォーマンスを向上させます。これは動的インポート（import ()）の方法で実現されます。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // Home コンポーネントを動的にインポート
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // About コンポーネントを動的にインポート
  },
];

ルートの履歴モードとハッシュモードの違いは？#

Vue プロジェクトでの多環境設定をどのように実現しますか？#

Vue の子コンポーネントと親コンポーネントの作成とマウントの順序について説明してください。#

Vue のパフォーマンス最適化方法は？#

バックエンドプロジェクトのログイン状態の期限切れをどのように処理しますか？#

Vue で API 権限検証とエラーハンドリングをどのように統一して処理しますか？#

0 から 1 まで自分で Vue 3 プロジェクトを構築する際のステップ、重要なプラグイン、ディレクトリ構造をどのように整理しますか？#

この記事は Mix Space によって xLog に同期更新されました
元のリンクは https://kaife.cn/posts/interview/vue

Vue3 選りすぐりの面接問題

あなたはどのような Vue 3 の新機能を知っていますか？#

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

Vue 3 ではコンポーネントインスタンスをどのように取得しますか？ テンプレート参照名をどのようにカスタマイズしますか？#

Vue 3 における ref と reactive の違いは何ですか？#

Vue 3 ではリアクティブオブジェクトを分解してもリアクティブ性を失わないようにするには？#

Vue 3 プロジェクトでのクロスオリジン問題をどのように処理しますか？#

Vue 3 では動的コンポーネントをどのように実現しますか？#

Vue 3 にはどのようなイベント修飾子がありますか？#

Vue 3 のトップレベル setup でコンポーネント名をどのように定義しますか？#

Vue 3 のトップレベル setup で子コンポーネントの変数やメソッドをどのように取得しますか？#

スコープスロットとは何ですか？#

コンポーネント間のトランジションアニメーションをどのように実現しますか？#

Vue 3 のスタイルスコープで "深く" 選択するには？#

Vue 3 で一度きりの監視と深い監視をどのように実現しますか？#

keep-alive の具体的な用途と実装原理は？#

カスタムディレクティブをどのように実現しますか？#

Vue 3 の Teleport とは何ですか？ どのように使用しますか？#

Vue 3 の Suspense とは何ですか？#

Pinia と Vuex の違いは何ですか？#

vue-router の params と query の違いは何ですか？#

ルートの遅延読み込みをどのように実現しますか？#

ルートの履歴モードとハッシュモードの違いは？#

Vue プロジェクトでの多環境設定をどのように実現しますか？#

Vue の子コンポーネントと親コンポーネントの作成とマウントの順序について説明してください。#

Vue のパフォーマンス最適化方法は？#

バックエンドプロジェクトのログイン状態の期限切れをどのように処理しますか？#

Vue で API 権限検証とエラーハンドリングをどのように統一して処理しますか？#

0 から 1 まで自分で Vue 3 プロジェクトを構築する際のステップ、重要なプラグイン、ディレクトリ構造をどのように整理しますか？#

Vue 3 ではコンポーネントインスタンスをどのように取得しますか？テンプレート参照名をどのようにカスタマイズしますか？#

Vue 3 の Teleport とは何ですか？どのように使用しますか？#