一、基础概念1-10题问Vue的核心特性有哪些答核心特性主要是这5点① 数据驱动视图MVVM思想数据变视图自动更不用手动操作DOM② 组件化开发页面拆成可复用的独立组件提升效率③ 双向数据绑定v-model简化表单交互④ 虚拟DOM减少真实DOM操作提性能⑤ 指令系统v-if、v-for等简化DOM操作逻辑。问Vue2和Vue3的核心响应式原理有什么区别答Vue2靠ES5的Object.defineProperty()实现局限是监不了对象新增/删除属性、数组下标和长度变化Vue3改用ES6的Proxy代理整个对象配合Reflect能天然支持对象属性增删、数组所有操作还能监Map/Set等复杂结构性能和扩展性也更好。问什么是MVVM模式Vue如何体现MVVM答MVVM是Model-View-ViewModel的缩写Model是数据层比如data、接口数据View是视图层DOMViewModel是连接两者的桥梁。Vue里ViewModel对应Vue实例dataModel变了会通过ViewModel自动更ViewView的操作比如输入也会通过ViewModel同步到Model实现数据和视图解耦。问Vue中组件的data为什么必须是函数根实例却可以是对象答组件是可复用的若data是对象多个组件实例会共享同一个对象改一个就影响所有把data设为函数每次创建组件都会返回新对象副本保证每个实例data独立。根实例唯一、不会复用所以直接用对象没问题。问Vue的单向数据流指什么有什么好处答单向数据流是数据只能从父组件流向子组件子组件不能直接改父组件传的props要改只能通过事件通知父组件自己改。好处是数据流向清晰易调试避免子组件乱改父组件数据导致状态混乱提升组件可维护性。问Vue的插值表达式{{}}有哪些使用限制答① 只能写单个表达式变量、三元运算、简单计算不能写语句if、for、赋值② 不能直接访问refs、refs、refs、el等特殊属性但能访问data、computed、methods③ 页面加载时会短暂闪现{{}}可加v-cloak解决。问v-text和插值表达式的区别是什么答① v-text会覆盖元素内所有内容插值表达式只替换自己② v-text不会有{{}}闪现问题因为是指令编译阶段就处理了③ 纯文本替换用v-text元素内有混合内容用插值表达式更灵活。问怎么理解Vue是“渐进式框架”答渐进式是指Vue核心功能轻量能根据需求逐步加扩展功能不用一次性全引入。比如基础开发只用核心的数据绑定、组件需要路由加vue-router需要状态管理加Vuex/Pinia需要工程化加Webpack/Vite。适配从小脚本到大型应用的不同场景学习成本也能逐步提升。问Vue实例的生命周期钩子和普通方法有啥本质区别答① 触发时机钩子由Vue在实例特定阶段自动调比如created在实例创建后普通方法要手动调比如点击事件触发② 执行环境钩子内this指向Vue实例不用手动绑定③ 用途钩子用于初始化、请求数据、DOM操作等生命周期节点普通方法处理业务逻辑。问Vue中el的作用是什么∗∗答∗∗el的作用是什么 **答**el的作用是什么∗∗答∗∗el是Vue实例挂载的原生DOM元素根元素只有mounted阶段后才指向真实DOM。可以通过this.$el直接操作挂载的DOM节点比如设样式、绑原生事件但尽量少用优先用Vue的响应式。二、模板与指令11-15题问v-if和v-show的区别各自适用于什么场景答核心区别是DOM渲染方式① v-if是条件渲染条件不满足时元素不在DOM树里销毁/重建v-show是条件显示元素始终在DOM里只改display:none② 性能v-if切换开销高DOM增删初始渲染开销低v-show切换开销低初始渲染开销高③ 场景频繁切换如tab、开关用v-show条件少变如权限模块用v-if。问v-for的key有什么作用为什么不建议用index当key答① key的作用Vue通过key标识节点唯一性列表更新时判断节点该复用还是重建减少DOM操作避免状态错位比如输入框内容乱了② 不用index的原因index随列表增删/排序变化key失效会让Vue误判节点导致视图更新异常、性能变差推荐用id等唯一标识。问v-for和v-if同时用会有什么问题怎么解决答① 问题v-for优先级比v-if高会先遍历整个列表再逐个判断v-if哪怕只有少量元素要显示也会遍历全部浪费性能② 解决要么把v-if提去父元素比如template先过滤列表再遍历要么用computed提前过滤数据再用v-for遍历过滤后的列表。问v-bind的作用是什么有哪些常用简写答① v-bind用于动态绑定HTML属性src、class、style或组件props② 简写是“:”比如v-bind:src“imgUrl简写为:src“imgUrl”还能批量绑定比如v-bind”{src: imgUrl, class: cls}。问v-on的作用是什么有哪些常用修饰符答① v-on用于绑定DOM事件click、input或组件自定义事件还能传参② 简写是“”比如v-on:clickfn简写为click“fn”常用修饰符.stop阻止冒泡、.prevent阻止默认行为、.once只触发一次、.enter只响应回车、.native监听组件根元素原生事件。三、生命周期16-20题问Vue2的生命周期钩子分哪几个阶段核心钩子有哪些答分4个阶段① 创建阶段beforeCreate实例刚建data/methods未初始化、created实例建好data/methods可用DOM未挂载② 挂载阶段beforeMount挂载前模板编译完$el生成但未挂载、mounted挂载完成可操作DOM③ 更新阶段beforeUpdate数据变视图未更、updated数据变视图已更④ 销毁阶段beforeDestroy销毁前实例仍可用清定时器/解绑事件、destroyed销毁完成实例失效。问Vue3的生命周期钩子和Vue2有哪些区别答① 命名组合式API里钩子加“on”created→onCreated选项式API名称不变② 新增onRenderTracked追踪渲染依赖、onRenderTriggered触发渲染时调用于调试③ 销毁钩子beforeDestroy/destroyed改成beforeUnmount/unmounted语义更准④ 执行组合式API的钩子写在setup里无需this访问实例。问在哪个生命周期钩子中发起异步请求最合适为什么答推荐created或mounted① created实例已初始化data/methods可用此时请求能提前拿数据不用等DOM挂载省时间② mountedDOM已挂载若请求数据要立即操作DOM比如渲染图表就用mounted。不建议在beforeCreate数据未初始化、beforeMountDOM未挂载里发更新/销毁阶段发无意义。问子组件和父组件的生命周期执行顺序是什么关系答挂载阶段父beforeCreate→父created→父beforeMount→子beforeCreate→子created→子beforeMount→子mounted→父mounted更新阶段父beforeUpdate→子beforeUpdate→子updated→父updated销毁阶段父beforeDestroy→子beforeDestroy→子unmounted/destroyed→父unmounted/destroyed。核心规律父先初始化子先挂载完成父最后挂载、最后销毁。问beforeDestroy里不清理定时器、解绑事件会有什么问题答① 内存泄漏定时器/事件持有实例引用实例销毁后资源不回收内存越用越多② 无效操作DOM已不存在定时器触发的DOM操作会报错事件触发无意义逻辑③ 性能损耗定时器持续执行耗CPU页面变卡。四、组件核心21-25题问Vue中props的传递原则是什么有哪些类型限制方式答① 传递原则props是单向数据流子组件只读不能直接改父组件用kebab-caseuser-name传子组件用camelCaseuserName接Vue自动转换② 类型限制基础类型String/Number等、对象形式指定type、required、default、validator自定义验证。问Vue中computed和methods的区别是什么答① 缓存computed基于依赖缓存依赖不变就不重新计算多次访问不重复执行methods每次调都重新执行无缓存② 调用computed在模板里直接写属性名{{fullName}}methods要加(){{getFullName()}}③ 用途computed适合衍生数据计算拼接姓名methods适合业务逻辑/事件处理表单提交。问computed和watch的区别各自适用于什么场景答① 核心computed是声明式告诉Vue要算什么基于依赖推导新值watch是命令式告诉Vue数据变了要做什么监听数据变执行回调② 缓存computed有watch无③ 场景computed适合简单衍生计算总价单价×数量watch适合数据变后的异步/复杂操作监听输入框变发搜索请求。问Vue中组件的自定义事件怎么实现有什么注意事项答① 实现子组件this.$emit(‘事件名’, 数据)触发父组件事件名处理函数监听处理函数能接子组件传的参数② 注意事件名建议用kebab-caseuser-change避免大小写问题监听组件原生事件要加.native别和原生事件名click冲突子组件触发的事件父组件没监听也不会报错注意拼写。问Vue中slot插槽有哪些类型各自的使用场景答① 默认插槽子组件占位父组件在子组件标签内写内容填充适合简单内容替换按钮文本② 具名插槽子组件父组件template #xxx填充适合多位置定制弹窗头/体/底③ 作用域插槽子组件slot :数据“值”传数据父组件v-slot参数接收适合父组件用子组件数据定制插槽列表组件自定义列表项。五、组件通信26-30题问Vue中父组件向子组件通信有哪些方式最常用的是哪种答① 核心最常用props传递符合单向数据流支持类型验证② 其他$refs父组件访问子组件实例直接拿data/调方法不推荐破坏数据流provide/inject父组件provide提供子组件任意层级inject接收适合跨层级少量数据。最常用的是props。问Vue中子组件向父组件通信有哪些方式答① 推荐自定义事件子emit父监听符合规范②不推荐emit父监听符合规范② 不推荐emit父监听符合规范②不推荐parent子组件直接访问父组件实例改父组件data破坏封装③ 事件总线EventBus空Vue实例当总线子emit父emit父emit父on适合中小型项目。问Vue中兄弟组件之间如何通信答① 事件总线公共事件中心兄弟Aemit兄弟Bemit兄弟Bemit兄弟Bon② 父组件中转兄弟A$emit给父父props传给兄弟B符合单向数据流③ Vuex/Pinia共享数据存全局状态库兄弟组件读/改适合大型项目④ provide/inject有共同祖先的话祖先provide兄弟inject。问Vue中跨多级组件祖孙/深层通信有哪些方式答① provide/inject简单适合跨层级少量数据② Vuex/Pinia适合跨层级、多组件共享大量数据③ 事件总线能实现但嵌套深了难追踪不推荐大型项目用。问Vue3中的mitt库是什么和传统EventBus有什么区别答① mitt是轻量级事件总线库200B左右支持TS是Vue3替代传统EventBus的方案Vue3移除了on/on/on/off② 区别传统EventBus依赖Vue实例mitt是独立库任意JS环境能用mitt支持批量移除事件、清空所有事件API更全TS支持更好。六、响应式原理31-35题问Vue2中Object.defineProperty()实现响应式的大致流程是什么答① 初始化遍历data所有属性② 劫持用Object.defineProperty()重写每个属性的getter/setter③ 依赖收集访问属性触发getter把当前Watcher视图观察者收集到Dep依赖管理器④ 派发更新修改属性触发setterDep通知所有Watcher更新视图。问为什么Vue2监不了数组的下标和长度变化怎么解决答① 原因Vue2为了性能没对数组下标做劫持只重写了7个变异方法push/pop等改length是直接改属性不会触发setter② 解决用变异方法、Vue.set(this.arr, 下标, 新值)、替换整个数组this.arr […this.arr, 1]。问Vue3中Proxy实现响应式的优势是什么答① 监听范围广能监对象增删属性、数组下标/长度、Map/Set② 性能优ES6原生拦截比Object.defineProperty()效率高③ 懒代理递归代理嵌套对象初始化性能好④ 不污染原对象Proxy返回新代理对象原对象不变。问Vue中什么是响应式数据如何让非响应式数据变响应式答① 响应式数据是被Vue劫持、变了能自动更视图的数据比如data里的② Vue2放data里、Vue.set加对象属性、用变异方法改数组③ Vue3ref包基本类型、reactive包对象/数组新增属性直接赋值就行。问Vue中Watcher的作用是什么有哪些类型答① 作用连接数据和视图先收集依赖数据访问时Watcher进Dep再触发更新数据变Dep通知Watcher更视图② 类型渲染Watcher组件对应一个更视图、计算属性Watcher缓存计算结果、自定义Watcherwatch选项/$watch创建执行自定义回调。七、Vue路由36-40题问Vue Router的核心作用是什么有哪些常用路由模式区别是什么答① 核心实现SPA路由跳转URL变不刷新页面切换组件视图② 模式hash模式基于URL#兼容好URL带#、history模式基于History APIURL无#需后端配置否则刷新404。问Vue Router中路由跳转有哪些方式区别是什么答① 声明式本质a标签适合静态跳转导航栏② 编程式router.push可返回、router.push可返回、router.push可返回、router.replace不可返回、$router.go前进/后退适合动态跳转登录后跳转③ 区别声明式简洁编程式灵活能结合业务逻辑。问Vue Router中如何传递路由参数有哪些方式答① 动态路由参数路由配置path: ‘/user/:id’跳转to“/user/123”接route.params.id②查询参数to/user?id123接route.params.id② 查询参数to/user?id123接route.params.id②查询参数to/user?id123接route.query.id③ 路由元信息路由配置meta: {title: ‘用户页’}接$route.meta。问Vue Router中的导航守卫有哪些类型各自的作用是什么答① 全局守卫beforeEach所有路由跳转前做权限验证、afterEach跳转后改页面标题② 路由独享守卫beforeEnter只对当前路由生效单路由权限③ 组件内守卫beforeRouteEnter进组件前无this、beforeRouteUpdate路由参数变但组件复用、beforeRouteLeave离开组件前提示未保存表单。问Vue Router中出现“NavigationDuplicated”错误的原因是什么如何解决答① 原因重复点同一个路由新版本push/replace返回Promise重复跳转抛错② 解决重写push/replace捕获错误、点击加防抖/节流、调用时手动catch错误。八、状态管理41-45题问Vuex的核心概念有哪些各自的作用是什么答① State全局状态数据组件通过$store.state访问② Getters基于State的衍生数据类似computed缓存③ Mutations改State的唯一方式同步操作通过commit触发④ Actions处理异步提交Mutations改State通过dispatch触发⑤ Modules拆分Vuex解决State庞大问题。问Vuex中为什么Mutations必须是同步的Actions可以是异步的答① Mutations同步Devtools要追踪State变化同步能准确记录修改轨迹异步的话Devtools不知道State何时改调试乱② Actions异步专门处理异步逻辑比如请求异步完成后commit Mutations既保证State修改可追踪又满足异步需求。问Pinia和Vuex的区别是什么为什么Vue3推荐用Pinia答① 区别Pinia取消MutationsActions可同步/异步改State天然模块化无需嵌套ModulesTS支持更好体积更小② 推荐原因API简洁、易上手TS友好模块化灵活符合Vue3组合式API思想是官方推荐的。问Vuex的严格模式有什么作用开启后需要注意什么答① 作用非Mutations改State会抛错强制遵循“通过Mutations改State”的规则避免状态混乱② 注意只在开发环境开生产环境关耗性能Mutations里不能异步开启方式是配置strict: true。问如何在Vue组件中高效使用Vuex/Pinia的状态和方法答① Vuex用mapState/mapGetters等辅助函数简化代码模块化加命名空间避免冲突② Pinia导入Store实例用storeToRefs转响应式避免解构丢响应式③ 通用只存全局共享数据私有数据存在组件自身。九、性能优化进阶46-50题问Vue项目中有哪些常见的性能优化手段答① 代码合理用v-if/v-show、v-for加key、计算属性替代重复表达式、异步组件拆分② 路由懒加载③ 打包按需引入第三方库、CDN引入大型库、压缩代码④ 其他防抖/节流高频事件、及时清定时器/解绑事件。问Vue中的异步组件是什么有什么作用答① 异步组件是需要时才加载的组件不是初始化全加载② 作用拆分代码包减少首屏加载时间优化大型应用初始化性能可加加载/错误状态骨架屏、错误提示。问Vue中如何实现组件的缓存有什么注意事项答① 实现用包裹组件比如② 常用属性include缓存指定组件、exclude不缓存、max最多缓存数量③ 注意缓存组件触发activated/deactivated钩子数据不会自动更需手动处理别缓存太多组件占内存。问Vue3的组合式API和选项式API有什么区别优势是什么答① 区别选项式按data/methods等选项组织代码逻辑分散组合式按功能组织逻辑集中组合式用自定义hooks复用逻辑比mixins更清晰② 优势代码组织灵活逻辑复用高效TS支持更好按需引入减体积。问Vue项目中常见的内存泄漏场景有哪些如何避免答① 场景未清理的定时器、未解绑的事件、未销毁的第三方库实例、对象循环引用、长期持有的DOM引用② 避免beforeUnmount里清定时器/解绑事件/销毁第三方实例避免循环引用用WeakMap/WeakSet存临时数据开发环境用Chrome Memory面板检测。