跳到主要内容Vue3 前端面试核心 20 题详解（含代码实战） | 极客日志JavaScript大前端
Vue3 前端面试核心 20 题详解（含代码实战）
Vue 3 面试高频考点梳理，覆盖 Composition API、响应式原理、生命周期及组件通信等核心内容。通过 20 道典型题目结合代码示例，解析 Proxy 与 Object.defineProperty 差异、ref 与 reactive 用法、setup 函数机制、Teleport/Suspense 新特性以及 v-model 实现原理。适合前端开发者系统复习框架升级点与工程化实践。
DebugKing0 浏览 本文梳理了 Vue 3 面试中的高频考点，涵盖 Composition API、响应式系统（ref/reactive）、生命周期钩子、组件通信、Teleport、Suspense 及自定义指令等核心内容。每道题均配有详细解析与代码示例，适合前端开发岗位的技术面试准备。
1. Vue 3 和 Vue 2 的区别是什么？
主要改进点：
| 特性 | Vue 2 | Vue 3 |
|---|
| 响应式系统 | Object.defineProperty | Proxy |
| 架构 | 单一源码 | 模块化架构（Tree-shakable） |
| Composition API | ❌ | ✅ |
| Fragment | ❌ | ✅ |
| Suspense 组件 | ❌ | ✅ |
| 自定义渲染器支持 | 有限 | 更灵活 |
| 支持 TypeScript | ❌（需额外配置） | ✅ 原生支持 |
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() 创建深层响应式对象。
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++;
user.name = 'Tom';
4. Vue 3 中如何监听数据变化？
- watchEffect：自动追踪依赖并执行副作用。
- watch：手动指定监听的目标。
import { ref, watchEffect, watch } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log('Count changed:', count.value);
});
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 触发事件。
export default {
props: ['title'],
emits: ['update'],
setup(props, { emit }) {
function handleClick() {
emit('update', 'New Value');
}
return { handleClick };
}
};
<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() 是 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 中如何实现响应式计算属性？
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>
<template>
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
</div>
</template>
11. Vue 3 中的 Teleport 有什么用途？
Teleport 可以将组件渲染到 DOM 中任意位置，例如将模态框渲染到 <body> 下。
<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> 中直接使用 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 中如何动态绑定样式？
<template>
<div :style="{ backgroundColor: color }">{{ text }}</div>
</template>
<script>
export default {
data() {
return {
color: 'lightblue',
text: '动态样式'
};
}
};
</script>
15. Vue 3 中如何注册全局组件？
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 中如何实现自定义指令？
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() 怎么用？
使用 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 实现全局通信。
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 | 插槽使用 | 默认插槽 / 具名插槽 | | 组件扩展 |
| 11 | Teleport 的用途 | 渲染到其他节点 | ... | DOM 结构优化 |
| 12 | Suspense 的用途 | 异步加载 | <template #default>... | 异步组件 |
| 13 |
| 快捷方式 | 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 |
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
