【Vue3】前端Vue3最常用的 20 道面试题总结（含详细代码解析）

全栈前端老曹

已于 2025-05-14 07:56:52 修改

阅读量2.3k

点赞数 13

分类专栏： Vue技术栈前端工程化与架构 javascript 文章标签：前端 vue.js javascript 面试前端框架 ecmascript react

于 2025-05-13 21:37:48 首次发布

本文链接：https://blog.csdn.net/qq_38060125/article/details/147934352

版权

javascript 同时被 3 个专栏收录

24 篇文章

订阅专栏

Vue技术栈

19 篇文章

订阅专栏

前端工程化与架构

14 篇文章

订阅专栏

以下是老曹关于 Vue 3 最常用的 20 道面试题总结，涵盖 Vue 3 的核心特性如 Composition API、响应式系统（ref / reactive）、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点。每道题都配有详细解释和代码示例，适合用于前端开发岗位的 Vue 3 技术面试准备，大家可以码住随时翻出来查阅背诵和练习！

1. Vue 3 和 Vue 2 的区别是什么？

问题： 解释 Vue 3 相比 Vue 2 的主要改进点。(最主要，不是全部，全部后续老曹会再扩展)

答案：

特性	Vue 2	Vue 3
响应式系统	`Object.defineProperty`	`Proxy`
架构	单一源码	模块化架构（Tree-shakable）
Composition API	❌	✅
Fragment	❌	✅
Suspense 组件	❌	✅
自定义渲染器支持	有限	更灵活
支持 TypeScript	❌（需额外配置）	✅ 原生支持

// Vue 3 示例：使用 Composition API
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    onMounted(() => {
      console.log('组件挂载');
    });
    return { count, increment };
  }
};

2. 如何在 Vue 3 中创建一个响应式对象？

问题： 使用 reactive() 创建一个响应式用户对象。

答案：
使用 reactive() 创建深层响应式对象。

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});

3. `ref()` 和 `reactive()` 的区别？

问题： 写出两者的不同点及适用场景。

答案：

ref()：适用于基本类型或单个值。
reactive()：适用于对象或复杂结构。

import { ref, reactive } from 'vue';

const count = ref(0); // 基本类型
const user = reactive({ name: 'Bob' }); // 对象

count.value++; // 必须用 .value
user.name = 'Tom'; // 不需要 .value

4. Vue 3 中如何监听数据变化？

问题： 使用 watchEffect 和 watch 的方式分别写出监听逻辑。

答案：

watchEffect：自动追踪依赖并执行副作用。
watch：手动指定监听的目标。

import { ref, watchEffect, watch } from 'vue';

const count = ref(0);

// watchEffect
watchEffect(() => {
  console.log('Count changed:', count.value);
});

// watch
watch(count, (newVal, oldVal) => {
  console.log(`从 ${oldVal} 变为 ${newVal}`);
});

5. Vue 3 的生命周期钩子有哪些？如何使用？

问题： 在 setup() 中使用 onMounted 生命周期钩子。

答案：
Vue 3 提供了与 Vue 2 类似的生命周期钩子，但必须从 vue 导入使用。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  }
};

6. Vue 3 中如何进行父子组件通信？

问题： 父组件向子组件传递数据，并触发事件。

答案：
使用 props接收父组件数据，使用 emit 触发事件。

// 子组件 Child.vue
export default {
  props: ['title'],
  emits: ['update'],
  setup(props, { emit }) {
    function handleClick() {
      emit('update', 'New Value');
    }
    return { handleClick };
  }
};

// 父组件 Parent.vue
<template>
  <Child :title="msg" @update="handleUpdate" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      msg: 'Hello'
    };
  },
  methods: {
    handleUpdate(value) {
      console.log('收到更新:', value);
    }
  }
};
</script>

7. Vue 3 的 `setup()` 函数的作用是什么？

问题： setup() 是什么？为什么它很重要？

答案：

setup() 是 Vue 3 Composition API 的入口函数。
替代 Vue 2 中的 data、methods、computed 等选项。
更好地组织逻辑复用和模块化代码。

export default {
  setup() {
    const message = ref('Hello Vue 3');
    function changeMessage() {
      message.value = 'Updated!';
    }
    return { message, changeMessage };
  }
};

8. Vue 3 中如何实现响应式计算属性？

问题： 使用 computed() 实现一个计算属性。

答案：
使用 computed() 创建响应式计算属性。

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  }
};

9. `provide()` 和 `inject()` 的作用是什么？

问题： 如何跨层级传递数据？

答案：
用于祖先组件向后代组件注入依赖，不通过 props 逐层传递。

// 祖先组件
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('dark');
    provide('theme', theme);
    return { theme };
  }
};

// 后代组件
import { inject } from 'vue';

export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
};

10. Vue 3 中如何使用插槽（Slot）？

问题： 实现一个默认插槽和具名插槽。

答案：

<!-- 父组件 -->
<template>
  <Card>
    <template #default>这是默认插槽内容</template>
    <template #header>这是头部插槽</template>
  </Card>
</template>

<!-- 子组件 Card.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>

11. Vue 3 中的 `Teleport` 有什么用途？

问题： 如何将模态框渲染到 <body> 下？

答案：
Teleport 可以将组件渲染到 DOM 中任意位置。

<template>
  <teleport to="body">
    <div v-if="showModal" class="modal">这是一个模态框</div>
  </teleport>
</template>

12. Vue 3 中的 `Suspense` 是什么？怎么用？

问题： 异步加载组件时显示加载状态。

答案：
Suspense 是一个内置组件，用于处理异步依赖。

<template>
  <suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      加载中...
    </template>
  </suspense>
</template>

<script>
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>

13. Vue 3 中的 `defineProps` 和 `defineEmits` 是什么？

问题： 在 <script setup> 中如何声明 props 和 emits？

答案：
在 <script setup> 中直接使用 defineProps 和 defineEmits。

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps(['title']);
const emit = defineEmits(['update']);

function updateTitle() {
  emit('update', 'New Title');
}
</script>

<template>
  <h1>{{ title }}</h1>
  <button @click="updateTitle">更新标题</button>
</template>

14. Vue 3 中如何动态绑定样式？

问题： 动态设置背景颜色。

答案：
使用 :style 绑定对象。

<template>
  <div :style="{ backgroundColor: color }">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'lightblue',
      text: '动态样式'
    };
  }
};
</script>

15. Vue 3 中如何注册全局组件？

问题： 注册一个可全局使用的按钮组件。

答案：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);
app.component('MyButton', MyButton);
app.mount('#app');

<!-- 使用 -->
<template>
  <my-button label="提交" />
</template>

16. Vue 3 中如何实现自定义指令？

问题： 实现一个高亮指令 v-highlight。

答案：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = '#f0e68c';
  }
});

app.mount('#app');

<!-- 使用 -->
<template>
  <p v-highlight>这段文字被高亮了</p>
</template>

17. Vue 3 中的 `nextTick()` 怎么用？

问题： 修改 DOM 后等待更新完成。

答案：
使用 nextTick() 确保 DOM 更新完成后执行操作。

import { nextTick } from 'vue';

async function updateData() {
  this.message = '更新后的内容';
  await nextTick();
  console.log('DOM 已更新');
}

18. Vue 3 中如何实现组件懒加载？

问题： 使用异步组件实现路由懒加载。

答案：
使用 defineAsyncComponent 实现懒加载。

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/LazyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

19. Vue 3 中的 `emitter` 是什么？如何使用？

问题： 实现非父子组件之间的通信。

答案：
使用第三方库如 mitt 或 EventBus 实现全局通信。

npm install mitt

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

// 发送事件
import { emitter } from './eventBus';
emitter.emit('update', 'Hello');

// 接收事件
import { emitter } from './eventBus';
emitter.on('update', (msg) => {
  console.log(msg);
});

20. Vue 3 中如何使用 `v-model` 实现双向绑定？

问题： 实现一个输入框组件的双向绑定。

答案：
使用 modelValue + update:modelValue。

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
};
</script>

📋 总结表格

编号	题目描述	知识点	示例代码	常见考察点
1	Vue3 与 Vue2 的区别	架构升级	`Proxy`, `Composition API`	框架理解
2	创建响应式对象	`reactive()`	`reactive({})`	数据绑定
3	`ref()` vs `reactive()`	响应式机制	`ref(0)` vs `reactive({})`	数据封装
4	数据监听	`watchEffect`, `watch`	`watch(count, () => {...})`	数据驱动
5	生命周期钩子	`onMounted`, `onUpdated`	`onMounted(() => {})`	组件控制
6	组件通信	[props]/ `emit`	`defineProps(['name'])`	组件设计
7	`setup()` 的作用	Composition API 入口	`setup() { return {} }`	逻辑组织
8	计算属性	`computed()`	`computed(() => a + b)`	响应式优化
9	跨级传参	`provide/inject`	`provide('theme', 'dark')`	数据共享
10	插槽使用	默认插槽 / 具名插槽	`<slot name="header" />`	组件扩展
11	`Teleport` 的用途	渲染到其他节点	`<teleport to="body">...</teleport>`	DOM 结构优化
12	`Suspense` 的用途	异步加载	`<suspense><template #default>...`	异步组件
13	`<script setup>` 中的 [props]/ `emit`	快捷方式	`defineProps(['title'])`	新语法糖
14	动态绑定样式	`:style`	`:style="{ color: textColor }"`	样式控制
15	全局组件注册	`component()`	`app.component('MyButton', Button)`	组件复用
16	自定义指令	`directive()`	`app.directive('highlight', { mounted: ... })`	扩展能力
17	`nextTick()` 的用途	DOM 更新监听	`await nextTick()`	渲染流程控制
18	组件懒加载	异步组件	`defineAsyncComponent(() => import(...))`	性能优化
19	全局事件通信	`mitt`	`emitter.on('event', fn)`	跨组件通信
20	`v-model` 的实现	双向绑定	`modelValue`, `update:modelValue`	表单组件设计

📌 高频考点补充

考点	描述
Composition API	替代 Options API，提升逻辑复用
Reactivity API	`ref`, `reactive`, `toRefs`, `watch`, `computed`
Teleport / Portal	渲染到任意 DOM 节点
Fragment	支持多个根节点
TypeScript 支持	完整 TS 类型推导
Custom Renderer	可定制渲染器（如 Canvas、SSR）
性能优化	更小的体积、更快的 Diff 算法
组合函数（Composable）	封装可复用逻辑
Vue 3 的编译器优化	Block Tree、Patch Flags
Vue 3 的生态支持	Vite、Pinia、Vue Router 4、Element Plus