Skip to content

Vue 常见与高阶面试题详解:从基础到源码原理

一、基础面试题

  1. Vue 的核心特性是什么?

    • 答案:Vue 的核心特性包括数据驱动视图(MVVM 模式)、组件化开发指令系统(如 v-ifv-for)、响应式数据绑定(基于 Object.defineProperty 或 Proxy),以及轻量高效的虚拟 DOM 机制。
  2. v-if 和 v-show 的区别?

    • 答案
  • v-if:动态添加/移除 DOM 元素,适用于切换频率低的场景。
  • v-show:通过 display: none 控制显隐,适合频繁切换的场景。
  • 扩展v-if 支持 <template> 标签和 v-else,而 v-show 不支持。
  1. 为什么组件中的 data 必须是函数?

    • 答案:避免多个组件实例共享同一数据对象,导致状态污染。函数返回独立的数据副本,保证组件复用时的数据隔离。
  2. Vue 生命周期钩子有哪些?

    • 答案
  • 创建阶段:beforeCreatecreated(数据初始化完成,但 DOM 未生成)
  • 挂载阶段:beforeMountmounted(DOM 已渲染)
  • 更新阶段:beforeUpdateupdated
  • 销毁阶段:beforeDestroydestroyed
  • 扩展activateddeactivated 用于 <keep-alive> 缓存的组件。
  1. v-for 中为什么要用 key?
    • 答案key 用于标识元素唯一性,帮助 Vue 高效更新虚拟 DOM。若缺少 key,可能导致列表渲染错误或性能下降。

二、高阶面试题

  1. Vue 响应式原理(Vue2 和 Vue3 的区别)?
    • 答案
  • Vue2:通过 Object.defineProperty 劫持对象属性的 getter/setter,需递归遍历对象和数组(通过重写数组方法实现监听)。
  • Vue3:使用 Proxy 代理整个对象,支持动态新增属性和深层嵌套结构的响应式,性能更优。
    • 扩展:Vue3 的 Reflect 配合 Proxy 解决了 this 指向问题。
  1. Vuex 的核心概念和工作流程?
    • 答案
  • State:单一状态树,存储全局数据。
  • Mutation:同步修改状态,通过 commit 触发。
  • Action:处理异步逻辑,通过 dispatch 触发,最终提交 Mutation。
  • Getter:计算派生状态。
  • 模块化:通过 namespaced: true 分割大型状态树。
  1. Vue 的 Diff 算法优化策略?
    • 答案
  • 同层比较:仅对比同一层级的节点,减少复杂度。
  • 双端指针:新旧节点首尾交叉对比,快速定位差异。
  • Key 复用:通过 key 匹配相同节点,避免重复渲染。
  1. Vue3 的 Composition API 解决了哪些问题?
    • 答案
  • 逻辑复用:通过 setup 和自定义 Hook 聚合相关代码,解决 Mixins 的命名冲突和来源不清晰问题。
  • 类型推断:更好的 TypeScript 支持。
  • 响应式隔离refreactive 明确区分基本类型和对象类型。
  1. 如何实现 Vue 自定义指令?
    • 答案
// 全局指令
Vue.directive('focus', {
inserted: (el) => el.focus()
});
// 局部指令
export default {
directives: {
highlight: {
bind(el, binding) {
el.style.backgroundColor = binding.value;
}
}
}
}
  • 扩展:常用钩子包括 bindinsertedupdate 等。

三、实战与优化

  1. 如何优化 Vue 项目的首屏加载速度?
    • 答案
  • 路由懒加载:使用 () => import('./Component.vue') 分割代码。
  • CDN 加速:第三方库通过 <script> 引入。
  • SSR/SSG:服务端渲染或静态生成(如 Nuxt.js)。
  • Prefetch/Preload:预加载关键资源。
  1. Vue 中如何实现权限控制?
    • 答案
  • 路由守卫:在 router.beforeEach 中校验用户角色和权限。
  • 动态路由:根据权限表动态添加路由配置。
  • 组件级控制:使用 v-if 或自定义指令(如 v-permission)。

四、扩展:源码级问题

  1. Vue 的模板编译过程?

    • 答案
  2. 解析:将模板字符串转换为 AST(抽象语法树)。

  3. 优化:标记静态节点,减少 Diff 范围。

  4. 生成:将 AST 转换为可执行的渲染函数。

  5. nextTick 的实现原理?

    • 答案:利用微任务队列(如 Promise.thenMutationObserver)或宏任务(如 setImmediatesetTimeout)异步执行回调,确保 DOM 更新后触发。

总结:本文覆盖 Vue 面试核心考点,从基础用法到源码原理,结合实战案例与优化策略,适合不同阶段的开发者查漏补缺。建议结合项目经验,深入理解设计思想,灵活应对面试挑战。