跳到主要内容 【Vue3】前端Vue3最常用的 20 道面试题总结(含详细代码解析) | 极客日志
Python
【Vue3】前端Vue3最常用的 20 道面试题总结(含详细代码解析) 以下是老曹关于 **Vue 3 最常用的 20 道面试题总结**,涵盖 Vue 3 的核心特性如 Composition API、响应式系统(ref / reactive)、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点。每道题都配有详细解释和代码示例,适合用于前端开发岗位的 Vue 3 技术面试准备,大家可以码住随时翻出来查阅背诵和练习! * * 1\. Vu…
奇形怪状 发布于 2026/4/6 更新于 2026/4/17 54K 浏览以下是老曹关于 Vue 3 最常用的 20 道面试题总结 ,涵盖 Vue 3 的核心特性如 Composition API、响应式系统( / )、生命周期钩子、组件通信、Teleport、Suspense、自定义指令等高频知识点。每道题都配有详细解释和代码示例,适合用于前端开发岗位的 Vue 3 技术面试准备,大家可以码住随时翻出来查阅背诵和练习!
ref
reactive
1. Vue 3 和 Vue 2 的区别是什么? 问题: 解释 Vue 3 相比 Vue 2 的主要改进点。(最主要,不是全部,全部后续老曹会再扩展)
特性 Vue 2 Vue 3 响应式系统 Object.definePropertyProxy架构 单一源码 模块化架构(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 };}};
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 );// watchEffectwatchEffect(()=>{ console.log('Count changed:' , count.value);});// watchwatch(count,(newVal, oldVal)=>{ console.log(`从 ${oldVal} 变为 ${newVal}` );});
5. Vue 3 的生命周期钩子有哪些?如何使用? 问题: 在 setup() 中使用 onMounted 生命周期钩子。
答案:
Vue 3 提供了与 Vue 2 类似的生命周期钩子,但必须从 vue 导入使用。
import { onMounted }from 'vue' ;exportdefault{setup ( ){onMounted (()=> { console .log ('组件已挂载' );});}};
6. Vue 3 中如何进行父子组件通信? 答案:
使用 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 >
7. Vue 3 的 setup() 函数的作用是什么?
setup() 是 Vue 3 Composition API 的入口函数。
替代 Vue 2 中的 data、methods、computed 等选项。
更好地组织逻辑复用和模块化代码。
exportdefault{setup ( ){const message =ref ('Hello Vue 3' );functionchangeMessage (){ message.value ='Updated!' ;}return { message, changeMessage };}};
8. Vue 3 中如何实现响应式计算属性? 问题: 使用 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 };}};
9. 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 };}};
10. Vue 3 中如何使用插槽(Slot)? <template > <Card > <template#default>这是默认插槽内容</template > <template#header>这是头部插槽</template > </Card > </template > <template > <divclass="card"><header > <slotname="header"></slot > </header > <main > <slot > </slot > </main > </div > </template >
11. Vue 3 中的 Teleport 有什么用途? 答案:
Teleport 可以将组件渲染到 DOM 中任意位置。
<template ><teleportto="body" ><divv-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。
<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 >
14. Vue 3 中如何动态绑定样式? <template > <div:style="{ backgroundColor: color }">{{ text }}</div > </template > <script > exportdefault{data ( ){return { color :'lightblue' , text :'动态样式' };}}; </script >
15. Vue 3 中如何注册全局组件? // 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 >
16. Vue 3 中如何实现自定义指令? 问题: 实现一个高亮指令 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 >
17. Vue 3 中的 nextTick() 怎么用? 答案:
使用 nextTick() 确保 DOM 更新完成后执行操作。
import { nextTick }from 'vue' ;asyncfunctionupdateData ( ){this .message ='更新后的内容' ;awaitnextTick (); console .log ('DOM 已更新' );}
18. Vue 3 中如何实现组件懒加载? 答案:
使用 defineAsyncComponent 实现懒加载。
import { defineAsyncComponent }from 'vue' ;const AsyncComponent =defineAsyncComponent (()=> import ('./components/LazyComponent.vue' ));exportdefault{ components :{ AsyncComponent }};
19. Vue 3 中的 emitter 是什么?如何使用? 答案:
使用第三方库如 mitt 或 EventBus 实现全局通信。
// 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);});
20. Vue 3 中如何使用 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, watchwatch(count, () => {...})数据驱动 5 生命周期钩子 onMounted, onUpdatedonMounted(() => {})组件控制 6 组件通信 [props]/ emit defineProps(['name'])组件设计 7 setup() 的作用Composition API 入口 setup() { return {} }逻辑组织 8 计算属性 computed()computed(() => a + b)响应式优化 9 跨级传参 provide/injectprovide('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 全局事件通信 mittemitter.on('event', fn)跨组件通信 20 v-model 的实现双向绑定 modelValue, update:modelValue表单组件设计
📌 高频考点补充 考点 描述 Composition API 替代 Options API,提升逻辑复用 Reactivity API ref, reactive, toRefs, watch, computedTeleport / 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 转代码 解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
Markdown转HTML 将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
HTML转Markdown 将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online