Vue 常见与高阶面试题详解:从基础到源码原理
一、基础面试题
-
Vue 的核心特性是什么?
- 答案:Vue 的核心特性包括数据驱动视图(MVVM 模式)、组件化开发、指令系统(如
v-if
、v-for
)、响应式数据绑定(基于Object.defineProperty
或 Proxy),以及轻量高效的虚拟 DOM 机制。
- 答案:Vue 的核心特性包括数据驱动视图(MVVM 模式)、组件化开发、指令系统(如
-
v-if 和 v-show 的区别?
- 答案:
v-if
:动态添加/移除 DOM 元素,适用于切换频率低的场景。v-show
:通过display: none
控制显隐,适合频繁切换的场景。- 扩展:
v-if
支持<template>
标签和v-else
,而v-show
不支持。
-
为什么组件中的 data 必须是函数?
- 答案:避免多个组件实例共享同一数据对象,导致状态污染。函数返回独立的数据副本,保证组件复用时的数据隔离。
-
Vue 生命周期钩子有哪些?
- 答案:
- 创建阶段:
beforeCreate
、created
(数据初始化完成,但 DOM 未生成) - 挂载阶段:
beforeMount
、mounted
(DOM 已渲染) - 更新阶段:
beforeUpdate
、updated
- 销毁阶段:
beforeDestroy
、destroyed
- 扩展:
activated
和deactivated
用于<keep-alive>
缓存的组件。
- v-for 中为什么要用 key?
- 答案:
key
用于标识元素唯一性,帮助 Vue 高效更新虚拟 DOM。若缺少key
,可能导致列表渲染错误或性能下降。
- 答案:
二、高阶面试题
- Vue 响应式原理(Vue2 和 Vue3 的区别)?
- 答案:
- Vue2:通过
Object.defineProperty
劫持对象属性的getter/setter
,需递归遍历对象和数组(通过重写数组方法实现监听)。 - Vue3:使用
Proxy
代理整个对象,支持动态新增属性和深层嵌套结构的响应式,性能更优。- 扩展:Vue3 的
Reflect
配合Proxy
解决了this
指向问题。
- 扩展:Vue3 的
- Vuex 的核心概念和工作流程?
- 答案:
- State:单一状态树,存储全局数据。
- Mutation:同步修改状态,通过
commit
触发。 - Action:处理异步逻辑,通过
dispatch
触发,最终提交 Mutation。 - Getter:计算派生状态。
- 模块化:通过
namespaced: true
分割大型状态树。
- Vue 的 Diff 算法优化策略?
- 答案:
- 同层比较:仅对比同一层级的节点,减少复杂度。
- 双端指针:新旧节点首尾交叉对比,快速定位差异。
- Key 复用:通过
key
匹配相同节点,避免重复渲染。
- Vue3 的 Composition API 解决了哪些问题?
- 答案:
- 逻辑复用:通过
setup
和自定义 Hook 聚合相关代码,解决 Mixins 的命名冲突和来源不清晰问题。 - 类型推断:更好的 TypeScript 支持。
- 响应式隔离:
ref
和reactive
明确区分基本类型和对象类型。
- 如何实现 Vue 自定义指令?
- 答案:
// 全局指令 Vue.directive('focus', { inserted: (el) => el.focus() }); // 局部指令 export default { directives: { highlight: { bind(el, binding) { el.style.backgroundColor = binding.value; } } } }
- 扩展:常用钩子包括
bind
、inserted
、update
等。
三、实战与优化
- 如何优化 Vue 项目的首屏加载速度?
- 答案:
- 路由懒加载:使用
() => import('./Component.vue')
分割代码。 - CDN 加速:第三方库通过
<script>
引入。 - SSR/SSG:服务端渲染或静态生成(如 Nuxt.js)。
- Prefetch/Preload:预加载关键资源。
- Vue 中如何实现权限控制?
- 答案:
- 路由守卫:在
router.beforeEach
中校验用户角色和权限。 - 动态路由:根据权限表动态添加路由配置。
- 组件级控制:使用
v-if
或自定义指令(如v-permission
)。
四、扩展:源码级问题
-
Vue 的模板编译过程?
- 答案:
-
解析:将模板字符串转换为 AST(抽象语法树)。
-
优化:标记静态节点,减少 Diff 范围。
-
生成:将 AST 转换为可执行的渲染函数。
-
nextTick 的实现原理?
- 答案:利用微任务队列(如
Promise.then
、MutationObserver
)或宏任务(如setImmediate
、setTimeout
)异步执行回调,确保 DOM 更新后触发。
- 答案:利用微任务队列(如
总结:本文覆盖 Vue 面试核心考点,从基础用法到源码原理,结合实战案例与优化策略,适合不同阶段的开发者查漏补缺。建议结合项目经验,深入理解设计思想,灵活应对面试挑战。