前端实习Vue面试题总结

从一些面经里面扒出来整理的

框架其实感觉不是重点考察的点啊 但是简单的八股还是要背背 原理这些我感觉无所谓 因为我React原理背了一堆感觉也没什么用

一、基础概念与原理
1. Vue 的 MVVM 模式是什么？
MVVM（Model-View-ViewModel）通过数据绑定实现视图与数据的自动同步。
  - Model：数据层，负责业务逻辑。
  - View：UI 层，展示数据。
  - ViewModel：双向绑定桥梁，监听数据变化并更新视图。
2. Vue2 与 Vue3 的核心区别
  - 响应式系统：Vue2 使用 Object.defineProperty，Vue3 改用 Proxy，支持深层对象和数组监听。
  - Composition API：Vue3 提供更灵活的代码组织方式，替代 Options API 的逻辑分散问题。
  - 性能优化：Vue3 通过静态提升（Static Hoisting）和 Patch Flag 减少虚拟 DOM 对比开销。
3. Vue 生命周期钩子函数及作用
  - 创建阶段：beforeCreate（数据未初始化）、created（可访问数据，但 DOM 未挂载）。
  - 挂载阶段：beforeMount（模板编译完成）、mounted（DOM 渲染完成，适合异步请求）。
  - 更新阶段：beforeUpdate、updated（数据变化后触发）。
  - 销毁阶段：beforeDestroy（清理定时器）、destroyed。
二、核心机制与优化
4. 响应式原理实现
  - Vue2：通过 Object.defineProperty 递归劫持对象属性，结合发布-订阅模式收集依赖。
  - Vue3：基于 Proxy 代理对象，支持动态属性添加和数组索引修改，减少初始化性能损耗。
5. 虚拟 DOM 与 Diff 算法的作用
  - 虚拟 DOM：JS 对象模拟真实 DOM，减少直接操作 DOM 的性能损耗。
  - Diff 算法：同级对比新旧虚拟 DOM，通过 Key 标识复用节点，最小化更新范围。
6. Computed 和 Watch 的区别
  - Computed：依赖缓存，适合派生数据（如过滤列表），仅在依赖变化时重新计算。
  - Watch：监听数据变化执行回调，支持异步操作，适用于数据变动后的复杂处理。
三、组件与通信
7. 组件通信方式
  - 父子组件：props 传值，$emit 触发事件。
  - 跨层级：provide/inject（依赖注入）、Vuex 全局状态管理。
  - 兄弟组件：事件总线（Event Bus）或通过父组件中转。
8. 动态组件与异步组件
  - 动态组件：使用  动态切换组件。
  - 异步组件：通过 defineAsyncComponent 或路由懒加载（() => import('./Component.vue')）优化首屏性能。
9. 插槽（Slots）的应用场景
  - 默认插槽： 接收父组件内容。
  - 具名插槽： 指定插入位置。
  - 作用域插槽：子组件通过 v-bind 传递数据给父组件14。
四、路由与状态管理
10. Vue Router 的导航守卫
  - 全局守卫：beforeEach（路由跳转前鉴权）、afterEach（跳转后操作）。
  - 路由独享守卫：beforeEnter。
  - 组件内守卫：beforeRouteEnter（无法访问 this）、beforeRouteUpdate。
11. Vuex 的核心概念
  - State：存储全局状态。
  - Mutations：同步修改状态（通过 commit 触发）。
  - Actions：异步操作后提交 Mutations（通过 dispatch 触发）。
  - Getters：计算派生状态。
五、高频实战问题
12. v-if 与 v-show 的区别
  - v-if：条件渲染，销毁/重建 DOM，适用于切换频率低的场景。
  - v-show：通过 CSS display 控制显示，适合频繁切换。
13. v-for 为何需要 Key？
Key 帮助 Vue 识别节点身份，优化 Diff 算法效率，避免渲染错误
14. Vue 性能优化手段
  - 使用 v-once 或 v-memo 缓存静态内容。
  - 路由懒加载、组件异步加载。
  - 避免深层响应式对象，合理使用 Object.freeze。
六、原理类高频问题
1. Vue 的响应式系统中，Object.defineProperty 和 Proxy 在实现上有何本质区别？Vue3 改用 Proxy 解决了哪些痛点？
（提示：数组监听、动态属性、性能开销）
2. 依赖收集（Dependency Collection）和派发更新（Trigger Updates）的具体流程是怎样的？请描述 Dep 和 Watcher 的协作关系。
（提示：发布-订阅模式、getter/setter 触发时机）
3. Vue 的模板编译过程经历了哪几个阶段？如何将模板字符串转换为渲染函数？
（提示：解析器生成 AST → 优化器标记静态节点 → 代码生成器生成 render 函数）
4. 虚拟 DOM 的 Diff 算法中，为什么要优先进行“同层比较”而不是跨层递归？Key 值在 Diff 过程中起到了什么作用？
（提示：时间复杂度优化、节点复用策略）
5. Vue 的异步更新队列（Async Update Queue）是如何工作的？为什么修改数据后立即访问 DOM 可能获取不到最新值？
（提示：nextTick 实现原理、事件循环与微任务）
6. Vue3 的静态提升（Static Hoisting）和 Block Tree 机制如何优化渲染性能？
（提示：跳过静态节点比对、动态节点标记 Patch Flags）
7. 计算属性（Computed）的缓存特性是如何实现的？与普通方法调用有何本质区别？
（提示：脏检查机制、依赖追踪）
8. Vue 组件实例化过程中，data 选项为什么要用函数返回对象，而不是直接写对象？
（提示：避免多个实例共享同一数据引用）
9. Vue 的事件系统是如何实现 v-on 的？事件修饰符（如 .native）底层做了哪些处理？
（提示：原生事件与自定义事件的分发机制）
10. Vue3 的 Composition API 如何解决逻辑复用问题？对比 Mixins 和 Hooks 的优缺点。
（提示：命名冲突、代码组织、类型推导）