以下是老曹关于 **Vue 3 最常用的 20 道面试题总结**，涵盖 Vue 3 的核心特性如 Composition API、响应式系统（ref / reactive）、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点。每道题都配有详细解释和代码示例，适合用于前端开发岗位的 Vue 3 技术面试准备，大家可以码住随时翻出来查阅背诵和练习！ * * 1\. Vu…
以下是老曹关于 Vue 3 最常用的 20 道面试题总结，涵盖 Vue 3 的核心特性如 Composition API、响应式系统（ / ）、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点。每道题都配有详细解释和代码示例，适合用于前端开发岗位的 Vue 3 技术面试准备，大家可以码住随时翻出来查阅背诵和练习！
refreactive问题： 解释 Vue 3 相比 Vue 2 的主要改进点。(最主要，不是全部，全部后续老曹会再扩展)
答案：
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 响应式系统 | Object.defineProperty | Proxy |
| 架构 | 单一源码 | 模块化架构（Tree-shakable） |
| Composition API | ❌ | ✅ |
| Fragment | ❌ | ✅ |
| Suspense 组件 | ❌ | ✅ |
| 自定义渲染器支持 | 有限 | 更灵活 |
| 支持 TypeScript | ❌（需额外配置） | ✅ 原生支持 |
// Vue 3 示例：使用 Composition APIimport{ ref, onMounted }from'vue';exportdefault{setup(){const count =ref(0);functionincrement(){ 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);// watchEffectwatchEffect(()=>{ console.log('Count changed:', count.value);});// watchwatch(count,(newVal, oldVal)=>{ console.log(`从 ${oldVal} 变为 ${newVal}`);});
问题： 在 setup() 中使用 onMounted 生命周期钩子。
答案：
Vue 3 提供了与 Vue 2 类似的生命周期钩子，但必须从 vue 导入使用。
import{ onMounted }from'vue';exportdefault{setup(){onMounted(()=>{ console.log('组件已挂载');});}};
问题： 父组件向子组件传递数据，并触发事件。
答案：
使用 props接收父组件数据，使用 emit 触发事件。
// 子组件 Child.vueexportdefault{ props:['title'], emits:['update'],setup(props,{ emit }){functionhandleClick(){emit('update','New Value');}return{ handleClick };}};// 父组件 Parent.vue<template><Child :title="msg" @update="handleUpdate"/></template><script>import Child from'./Child.vue';exportdefault{ components:{ Child },data(){return{ msg:'Hello'};}, methods:{handleUpdate(value){ console.log('收到更新:', value);}}};</script>
setup() 函数的作用是什么？问题：setup() 是什么？为什么它很重要？
答案：
setup() 是 Vue 3 Composition API 的入口函数。data、methods、computed 等选项。exportdefault{setup(){const message =ref('Hello Vue 3');functionchangeMessage(){ message.value ='Updated!';}return{ message, changeMessage };}};
问题： 使用 computed() 实现一个计算属性。
答案：
使用 computed() 创建响应式计算属性。
import{ ref, computed }from'vue';exportdefault{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';exportdefault{setup(){const theme =ref('dark');provide('theme', theme);return{ theme };}};// 后代组件import{ inject }from'vue';exportdefault{setup(){const theme =inject('theme');return{ theme };}};
问题： 实现一个默认插槽和具名插槽。
答案：
<!-- 父组件 --><template><Card><template#default>这是默认插槽内容</template><template#header>这是头部插槽</template></Card></template><!-- 子组件 Card.vue --><template><divclass="card"><header><slotname="header"></slot></header><main><slot></slot></main></div></template>
Teleport 有什么用途？问题： 如何将模态框渲染到 <body> 下？
答案：
Teleport 可以将组件渲染到 DOM 中任意位置。
<template><teleportto="body"><divv-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。
<scriptsetup>import{ defineProps, defineEmits }from'vue';const props =defineProps(['title']);const emit =defineEmits(['update']);functionupdateTitle(){emit('update','New Title');}</script><template><h1>{{ title }}</h1><button@click="updateTitle">更新标题</button></template>
问题： 动态设置背景颜色。
答案：
使用 :style 绑定对象。
<template><div:style="{ backgroundColor: color }">{{ text }}</div></template><script>exportdefault{data(){return{ color:'lightblue', text:'动态样式'};}};</script>
问题： 注册一个可全局使用的按钮组件。
答案：
// main.jsimport{ 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-buttonlabel="提交"/></template>
问题： 实现一个高亮指令 v-highlight。
答案：
// main.jsimport{ 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><pv-highlight>这段文字被高亮了</p></template>
nextTick() 怎么用？问题： 修改 DOM 后等待更新完成。
答案：
使用 nextTick() 确保 DOM 更新完成后执行操作。
import{ nextTick }from'vue';asyncfunctionupdateData(){this.message ='更新后的内容';awaitnextTick(); console.log('DOM 已更新');}
问题： 使用异步组件实现路由懒加载。
答案：
使用 defineAsyncComponent 实现懒加载。
import{ defineAsyncComponent }from'vue';const AsyncComponent =defineAsyncComponent(()=>import('./components/LazyComponent.vue'));exportdefault{ components:{ AsyncComponent }};
emitter 是什么？如何使用？问题： 实现非父子组件之间的通信。
答案：
使用第三方库如 mitt 或 EventBus 实现全局通信。
npminstall mitt
// eventBus.jsimport mitt from'mitt';exportconst 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>exportdefault{ 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 |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online