Vue3+TS 高频面试题及详细答案（实战向）

Vue3+TS高频面试题及详细答案（实战向）一、Vue3基础核心面试题1.说说Vue3相比Vue2的核心优势？答：日常开发中体感最明显的优化主要有这几点：1.性能更好：重写了响应式系统，改用Proxy替代Object.defineProperty，解决了Vue2无法监听数组下标、对象新增/删除属性的问题；同时编译阶段做了PatchFlag、静态提升、事件缓存等优化，渲染和更新速度更快。2.代码组织更清晰：推出组合式API（setup），告别Vue2选项式API选项分散的问题，同一业务逻辑可以集中编写，大型项目维护性大幅提升。3.更好的TS支持：Vue3源码本身就是用TS重写的，提供完整的类型推导、接口和泛型支持，配合defineProps、defineEmits可以实现组件类型强校验。4.打包体积更小：支持Tree-Shaking，按需引入API，未使用的功能不会被打包到代码中，大幅减小生产包体积。5.新增特性实用：比如Teleportteleport组件穿透、Suspense异步加载兜底、多根节点组件、自定义渲染器等。2.Vue3响应式原理和Vue2有什么本质区别？答：核心区别是响应式监听方案和监听范围不同：Vue2基于Object.defineProperty，只能监听对象已有的属性，无法监听对象新增、删除属性，也无法监听数组下标修改、数组长度变更。所以Vue2需要$set、$delete来解决这些边界问题，数组也需要重写七个变异方法实现监听。Vue3基于ES6Proxy，可以对整个对象做代理拦截，支持对象新增/删除属性、数组所有操作、深层对象监听，无需额外API。同时搭配Reflect反射方法，保证属性操作的返回值更规范，规避了Vue2的诸多响应式漏洞。另外Vue3做了懒监听优化，只有被用到的属性才会触发依赖收集，未渲染的属性不会建立响应式依赖，性能更优。3.说说setup函数的执行时机和特点？答：setup是组合式API的核心入口，执行时机在beforeCreate之前，组件实例还未创建。核心特点：1.执行时没有this，无法访问data、methods、computed等选项式API属性。2.所有响应式数据、方法、计算属性都需要手动定义，最后return暴露给模板使用。3.仅执行一次，初始化组件时运行，不会随页面更新重复执行。4.可以接收两个参数：props、context，分别用于接收父组件传值、获取组件上下文（attrs、emit、slots等）。5.在<scriptsetup>语法糖下，无需手动return，定义的变量和方法可直接在模板使用，代码更简洁。4.scriptsetup语法糖的优势和注意事项？答：<scriptsetup>是Vue3推荐的语法糖，也是现在项目主流写法：优势：1.简化代码，无需手动return变量、方法，无需注册组件，直接引入即可使用。2.天生支持TS，类型推导更顺畅，适配类型约束。3.编译阶段优化，代码执行效率更高，减少运行时开销。4.顶层代码直接执行，无需嵌套setup函数，逻辑更扁平。注意事项：1.没有组件实例this，不能通过this调用方法、获取属性。2.必须使用内置宏函数defineProps、defineEmits、defineExpose处理父子组件通信和属性暴露。3.所有顶层变量默认组件私有，需要暴露给父组件通过ref获取时，必须用defineExpose。二、Vue3组合式API高频题1.ref和reactive的区别？各自使用场景？答：两者都是创建响应式数据的核心API，核心区别在数据类型和使用方式：ref：1.支持基本数据类型（字符串、数字、布尔）和引用类型，底层通过包装一层value属性实现响应式。2.脚本中访问/修改值需要.value，模板中可省略.value。3.解构不会丢失响应式，使用更简单。reactive：1.仅支持对象、数组等引用类型，基于Proxy直接代理对象。2.无需.value取值，直接操作属性即可。3.直接解构会丢失响应式，需要配合toRefs或toRef保留响应式。使用场景：简单数据、表单单个字段、基础类型数据优先用ref；复杂对象、批量状态、表单整体对象、列表数据优先用reactive。2.toRef和toRefs的作用和区别？答：两个API都是为了保留响应式，解决reactive对象解构丢失响应式的问题：1.toRef：针对reactive对象的单个属性创建响应式引用，精准监听某个属性，修改值会同步原对象，多用于单独导出某个状态。2.toRefs：将整个reactive对象的所有属性批量转为ref响应式变量，支持整体解构，日常解构赋值场景用得最多。核心特点：两者都是引用关系，修改新变量会同步原响应式对象，不会产生拷贝。3.computed和watch、watchEffect的区别？答：三者都是监听数据变化的API，适用场景完全不同：computed计算属性：1.有缓存，依赖不变时不会重复计算。2.同步执行，只做数据派生、逻辑计算，不适合异步操作。3.必须有返回值，多用于模板数据二次处理、过滤、拼接、换算。watch侦听器：1.无缓存，数据变化就触发。2.支持异步操作，适合接口请求、数据持久化、复杂副作用逻辑。3.可以精准监听单个或多个依赖，可配置立即执行、深度监听。watchEffect：1.自动收集依赖，无需手动传入监听源，代码更简洁。2.组件初始化会立即执行一次，依赖变化再次执行。3.无法获取新旧值，适合无需对比变化、只需要执行副作用的场景。4.Vue3生命周期有哪些变化？常用组合式生命周期？答：Vue3兼容Vue2的选项式生命周期，同时新增组合式生命周期钩子，整体移除了beforeCreate、created（被setup替代）。常用组合式生命周期：1.onMounted：组件挂载完成，可操作DOM、发起首次接口请求2.onUpdated：组件数据更新、DOM更新完成后触发3.onUnmounted：组件销毁，清除定时器、监听、事件绑定，防止内存泄漏4.onBeforeMount：挂载前执行5.onBeforeUpdate：更新前执行6.onActivated/onDeactivated：配合keep-alive使用，组件激活/失活触发新增专属钩子：onRenderTracked、onRenderTriggered用于调试依赖更新，onErrorCaptured捕获子组件错误。三、Vue3+TS结合核心面试题1.scriptsetup中如何用TS约束props类型？答：日常项目主要用泛型定义props，抛弃Vue2的对象校验方式，类型更严格，分为两种写法：写法1：类型字面量定义（常用、简洁）typescript

constprops=defineProps<{

id:number

name:string

list?:string[]//可选参数

info:{age:number}

}>()

写法2：带默认值+类型校验typescript

constprops=withDefaults(defineProps<{

page:number

size?:number

}>(),{

page:1,

size:10

})

优势：支持完整TS类型推导、可选值、嵌套对象类型，编译阶段就能校验类型错误，比运行时校验更严谨。2.如何用TS约束emit事件和参数类型？答：通过defineEmits泛型约束自定义事件名称和传参类型，实现强类型校验：typescript

//定义事件名和对应参数类型

constemit=defineEmits<{

//无参事件

'refresh':()=>void

//带参数事件

'change':(val:number)=>void

//多参数事件

'submit':(name:string,age:number)=>void

}>()

//触发事件，类型错误会直接报错

emit('change',10)

好处：父子组件事件传参类型统一，避免传参类型错误、参数缺失等问题，维护性更高。3.TS中defineExpose的作用是什么？答：scriptsetup语法下，组件所有变量、方法默认不对外暴露，父组件通过ref无法获取子组件实例的属性和方法。defineExpose用于手动暴露子组件的属性、方法，让父组件可以通过ref调用。示例：typescript

//子组件

constcount=ref(0)

constgetInfo=()=>{

return'组件信息'

}

//对外暴露

defineExpose({

count,

getInfo

})

4.Vue3中如何定义全局TS类型？解决$globals、$router全局变量提示问题？答：项目中新建env.d.ts全局类型声明文件，扩展Vue全局实例类型，解决全局属性无类型提示、报错问题。示例代码：typescript

declaremodule'vue'{

interfaceComponentCustomProperties{

$http:(url:string)=>Promise<any>

$env:string

}

}

//扩展路由、pinia等全局类型

declaremodule'vue-router'{

interfaceRouteMeta{

title?:string

isAuth?:boolean

}

}

exportdefault{}

配置后全局挂载的属性、路由元信息等都会有完整的TS类型提示，无类型报错。5.TS泛型在Vue3中的实际使用场景？答：日常开发中泛型主要用于封装通用组件、通用请求、通用hooks，实现类型复用：1.封装通用表格、弹窗、选择器组件，适配不同数据类型2.封装全局请求方法，统一返回值类型，无需重复定义接口类型3.封装通用组合式hooks，比如useList、usePagination，适配不同业务列表简单示例：通用请求hookstypescript

functionuseRequest<T>(url:string){

constdata=ref<T|null>(null)

constloading=ref(false)

constfetch=async()=>{

loading.value=true

constres=awaitfetch(url)

data.value=awaitres.json()asT

loading.value=false

}

return{data,loading,fetch}

}

四、Vue3实战原理&优化面试题1.Vue3为什么可以多根节点？原理是什么？答：Vue2组件必须有唯一根节点，是因为Vue2的虚拟DOM渲染规则限制，需要单一根节点挂载。Vue3编译阶段新增了Fragment虚拟节点，相当于一个透明空节点，多个根节点会被包裹在Fragment中渲染，不会生成真实DOM，既支持多根节点写法，又不增加DOM层级，精简页面结构。2.Vue3PatchFlag静态提升的优化原理？答：这是Vue3编译阶段的核心优化，大幅减少diff开销：1.静态提升：页面中不变的静态DOM节点、文本，会被提升到渲染函数外部，只创建一次，不会每次更新都重新创建虚拟节点，减少重复渲染开销。2.PatchFlag补丁标记：编译时会给动态节点打标记，区分文本动态、属性动态、class动态、style动态等类型。diff更新时，只对比有标记的动态节点，忽略静态节点，极大提升diff效率。3.Vue3如何解决响应式重复触发更新的问题？答：Vue3通过队列更新+去重机制处理：1.数据变更不会立即更新DOM，会将更新任务推入微任务队列。2.同一组件、同一数据的多次变更会被去重，只执行一次更新。3.等待所有同步代码执行完毕后，统一执行队列中的更新任务，批量更新DOM。同时可以通过watch的flush配置、nextTick精准控制更新时机。4.说说Vue3项目的性能优化实战方案？答：结合日常开发，主要分为编译、运行时、业务三个层面：1.编译优化：利用Vue3自带的PatchFlag、静态提升，尽量拆分静态和动态节点；静态内容使用v-once只渲染一次。2.响应式优化：大型列表使用shallowRef、shallowReactive浅层响应式，减少深层监听开销；不需要响应式的纯静态数据直接用普通变量。3.渲染优化：长列表虚拟滚动，只渲染可视区域DOM，解决大数据列表卡顿；频繁更新的组件拆分粒度，避免不必要的全局更新。4.缓存优化：页面组件使用keep-alive缓存，避免重复挂载销毁；接口数据缓存，减少重复请求。5.工程优化：路由懒加载、组件按需引入、图片压缩、打包分包，减小首屏加载体积；开启gzip压缩。6.副作用清理：onUnmounted中清除定时器、窗口监听、事件订阅，避免内存泄漏。5.shallowRef和ref的区别？适用场景？答：shallowRef是浅层响应式API，只对根层级做响应式监听，深层属性变更不会触发视图更新。ref默认是深层响应式，会递归监听所有层级属性。使用场景：大型复杂对象、后端返回的超大列表数据，不需要精细监听内部属性，用shallowRef可以大幅减少响应式依赖收集的开销，提升页面性能。如果需要更新视图，直接替换整个变量即可。五、高频手写&实战面试题1.手写简单的Vue3组合式防抖hooks（TS版）typescript

import{ref}from'vue'

exportfunctionuseDebounce(fn:(...args:any[]