16-Vue2 面试题汇总

Vue2 面试题汇总面试是检验学习成果的重要方式。本章系统整理 Vue2 核心知识点的常见面试题涵盖基础概念、原理分析、实战场景三大类帮助你从容应对技术面试。一、基础概念Q1Vue 的生命周期有哪些适合在哪些阶段做什么答案Vue 2 组件生命周期分为 4 个阶段 8 个钩子阶段钩子用途创建beforeCreate数据观测和事件配置之前无法访问 data创建created数据观测完成可访问 dataDOM 未生成挂载beforeMount模板编译完成即将挂载到 DOM挂载mountedDOM 挂载完成可访问 ref更新beforeUpdate数据变化DOM 更新之前更新updatedDOM 更新完成销毁beforeDestroy实例销毁之前可清理定时器、事件监听销毁destroyed实例销毁完成子实例也全部销毁注意created发请求、mounted操作 DOM、beforeDestroy清理资源。Q2v-if 和 v-show 的区别特性v-ifv-show渲染机制条件为假时不渲染始终渲染切换 display切换开销高组件销毁/重建低CSS 切换初始渲染条件为假时不渲染始终渲染适用场景条件很少改变频繁切换Q3v-for 中 key 的作用为什么不能用 index答案key是 Vue 虚拟 DOM Diff 算法的标识用于识别哪些元素是相同的。有key基于 key 进行精确比较可复用组件保持状态无key/ 用indexVue 使用 “就地复用” 策略只更新内容不移动 DOM可能导致状态错乱不能用 index 的场景列表项有表单输入状态列表项有组件内部状态列表会增删改排序!-- 正确 --liv-foritem in list:keyitem.id{{ item.name }}/li!-- 错误 --liv-for(item, index) in list:keyindex{{ item.name }}/liQ4computed 和 watch 的区别特性computedwatch用途基于依赖计算派生值监听数据变化执行副作用缓存有缓存依赖不变不重新计算无缓存返回值必须有返回值不需要适用模板中复杂表达式异步操作、数据变化响应立即执行否可配置immediate: truecomputed:{fullName(){returnthis.firstName this.lastName;}},watch:{searchText(newVal,oldVal){this.fetchResults(newVal);}}Q5Vue 组件通信方式有哪些父子组件props / $emit父访问子$refs / $children跨层级provide / inject兄弟/任意EventBus / Vuex祖孙$attrs / $listeners方式方向适用场景props / $emit父子双向基本通信$refs父 → 子调用子组件方法$parent / $children父子不推荐耦合度高provide / inject祖先 → 后代深层嵌套$attrs / $listeners祖先 → 后代隔代传参EventBus任意简单全局事件Vuex全局复杂状态共享二、原理分析Q6Vue 响应式原理是什么答案Vue 2 使用Object.defineProperty实现响应式数据对象ObserverdefinePropertygetter收集依赖setter触发更新DepWatcher更新DOMObserver遍历数据对象用defineProperty将属性转为 getter/setterDep每个属性对应一个依赖收集器存储订阅该属性的 WatcherWatcher组件渲染时触发 getter将 Watcher 加入 Depsetter 触发时通知 Watcher 更新异步更新多个数据变化合并为一次 DOM 更新nextTick局限无法检测对象新增/删除属性需用Vue.set/Vue.delete无法检测数组索引和长度的变化Q7Vue 的 Diff 算法原理答案Vue 使用双端比较的 Diff 算法时间复杂度 O(n)旧节点[a, b, c, d] 新节点[b, a, c, e] 1. 头头比较: a vs b → 不同 2. 尾尾比较: d vs e → 不同 3. 旧头新尾: a vs e → 不同 4. 旧尾新头: d vs b → 不同 5. 在旧节点中查找 b → 找到移到最前面 ...核心策略同层比较不跨层头尾双端对比快速定位用 key 精确匹配可复用节点无法匹配时创建新节点Q8nextTick 的原理答案nextTick用于在下次 DOM 更新循环结束后执行回调。原理Vue 数据变化不立即更新 DOM而是将更新操作放入队列同一个事件循环中的数据变化合并为一次更新nextTick将回调放入微任务队列Promise/MutationObserver或宏任务setImmediate/setTimeout当前同步代码执行完DOM 更新完成后执行 nextTick 回调this.messageHello;// DOM 还没更新this.$nextTick((){// DOM 已更新console.log(this.$el.textContent);});Q9为什么 Vuex 的 mutation 必须是同步的答案DevTools 可追踪devtools 通过记录 mutation 来追踪状态变化实现时间旅行调试状态确定性同步 mutation 保证给定状态 给定 mutation 确定的新状态异步分离异步逻辑放在 action 中mutation 只负责同步状态变更如果 mutation 异步执行devtools 无法确定状态何时变化时间旅行调试将失效。三、实战场景Q10如何优化 Vue 项目性能优化方向具体措施代码层面路由懒加载、组件异步加载、合理使用 v-show/v-if数据层面大数据列表使用虚拟滚动、对象冻结Object.freeze渲染层面函数式组件、v-once、keep-alive 缓存构建层面代码分割、Gzip压缩、CDN、Tree Shaking网络层面图片懒加载、资源预加载、HTTP 缓存Q11Vue Router 的导航守卫有哪些执行顺序全局 afterEach全局 beforeResolve组件 beforeRouteEnter路由 beforeEnter全局 beforeEach用户触发全局 afterEach全局 beforeResolve组件 beforeRouteEnter路由 beforeEnter全局 beforeEach用户触发触发导航next()next()next()导航确认DOM更新Q12如何实现权限控制方案菜单权限后端返回角色对应的路由表前端过滤生成可访问路由按钮权限自定义指令v-permissionadmin接口权限JWT Token 后端拦截// 路由守卫router.beforeEach((to,from,next){consthasTokengetToken();consthasRolesstore.getters.roles.length0;if(hasToken!hasRoles){store.dispatch(user/getInfo).then(({roles}){store.dispatch(permission/generateRoutes,roles).then(routes{router.addRoutes(routes);next({...to,replace:true});});});}else{next();}});四、总结类别高频考点基础生命周期、v-if/v-show、key、computed/watch通信props/$emit、Vuex、provide/inject原理响应式、Diff、nextTick、虚拟DOM路由导航守卫、动态路由、懒加载工程性能优化、权限控制、组件设计建议在理解答案的基础上结合自己的项目经验举例说明这样的回答更有说服力。下一章我们将学习 Vue2服务端渲染 SSR了解同构应用的开发方式。五、思考题Vue 3 的响应式原理与 Vue 2 有什么不同keep-alive 的实现原理是什么如何设计一个可复用的表单验证组件Vue 的 slot 实现原理是什么