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 でインターフェースの権限検証とエラー処理をどのように統一して処理しますか？#

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 でインターフェースの権限検証とエラー処理をどのように統一して処理しますか？#

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

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

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