JavaScript大前端
Vue3 前端最常用的 20 道面试题总结及代码解析
总结了 Vue 3 前端开发中常见的 20 道面试题，涵盖响应式系统、Composition API、生命周期、组件通信、Teleport、Suspense 等核心知识点。每道题均提供详细解释与代码示例，帮助开发者掌握 Vue 3 特性，如 ref/reactive 区别、watch 用法、props/emits 传递、全局组件注册及自定义指令等，适合面试准备与技术复习。
总结了 Vue 3 前端开发中常见的 20 道面试题，涵盖响应式系统、Composition API、生命周期、组件通信、Teleport、Suspense 等核心知识点。每道题均提供详细解释与代码示例，帮助开发者掌握 Vue 3 特性，如 ref/reactive 区别、watch 用法、props/emits 传递、全局组件注册及自定义指令等，适合面试准备与技术复习。
问题： 解释 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 };
}
};
问题： 使用 reactive() 创建一个响应式用户对象。
答案：
使用 reactive() 创建深层响应式对象。
import { reactive } from 'vue';
const user = reactive({ name: 'Alice', age: 25 });
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
问题： 使用 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}`);
});
问题： 在 setup() 中使用 onMounted 生命周期钩子。
答案：
Vue 3 提供了与 Vue 2 类似的生命周期钩子，但必须从 vue 导入使用。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('组件已挂载');
});
}
};
问题： 父组件向子组件传递数据，并触发事件。
答案：
使用 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>
setup() 函数的作用是什么？问题： setup() 是什么？为什么它很重要？
答案：
setup() 是 Vue 3 Composition API 的入口函数。data、methods、computed 等选项。export default {
setup() {
const message = ref('Hello Vue 3');
function changeMessage() {
message.value = 'Updated!';
}
return { message, changeMessage };
}
};
问题： 使用 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 };
}
};
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 };
}
};
问题： 实现一个默认插槽和具名插槽。
答案：
<!-- 父组件 -->
<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>
Teleport 有什么用途？问题： 如何将模态框渲染到 <body> 下？
答案：
Teleport 可以将组件渲染到 DOM 中任意位置。
<template>
<teleport to="body">
<div v-if="showModal" class="modal">这是一个模态框</div>
</teleport>
</template>
Suspense 是什么？怎么用？问题： 异步加载组件时显示加载状态。
答案：
Suspense 是一个内置组件，用于处理异步依赖。
<template>
<suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>加载中...</template>
</suspense>
</template>
<script>
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>
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>
问题： 动态设置背景颜色。
答案：
使用 :style 绑定对象。
<template>
<div :style="{ backgroundColor: color }">{{ text }}</div>
</template>
<script>
export default {
data() {
return {
color: 'lightblue',
text: '动态样式'
};
}
};
</script>
问题： 注册一个可全局使用的按钮组件。
答案：
// 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>
问题： 实现一个高亮指令 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>
nextTick() 怎么用？问题： 修改 DOM 后等待更新完成。
答案：
使用 nextTick() 确保 DOM 更新完成后执行操作。
import { nextTick } from 'vue';
async function updateData() {
message.value = '更新后的内容';
await nextTick();
console.log('DOM 已更新');
}
问题： 使用异步组件实现路由懒加载。
答案：
使用 defineAsyncComponent 实现懒加载。
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./components/LazyComponent.vue'));
export default {
components: { AsyncComponent }
};
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);
});
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 |
| 考点 | 描述 |
|---|---|
| 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 |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
: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 | 表单组件设计 |