Vue.js 深度剖析：2024 前端高频面试题详解

1. Vue 的响应式原理是什么？

答：
Vue 的响应式系统基于数据劫持和发布-订阅模式。

• 数据劫持：
  • Vue 2 使用 Object.defineProperty，通过重写对象属性的 getter 和 setter 方法，拦截对数据的读取和修改操作。
  • Vue 3 使用 Proxy，可以代理整个对象，支持动态添加属性和数组索引的监听。
• 依赖收集：
  • Vue 内部有一个 Dep 对象，管理所有的观察者。当一个响应式数据被访问时，会将依赖该数据的组件添加到 Dep 中。
• 变化通知：
  • 当响应式数据发生变化时，setter 会触发，Dep 通知所有依赖的观察者，更新视图。

扩展：

• 为什么 Vue 3 用 Proxy 替代 Object.defineProperty？
  • Proxy 能监听数组的索引变化和对象属性的新增删除。
  • Proxy 更加灵活，支持多种操作符。
  • Proxy 在性能上也优于 Object.defineProperty。

面试延伸：

• 响应式系统如何处理循环引用？
  • Vue 内部会维护一个依赖树，避免循环调用，确保更新逻辑稳定。
• 如何优化响应式性能？
  • 使用 watch 或 computed 控制数据的响应式范围，避免过多依赖。

2. Vue 组件通信方式有哪些？

答：
Vue 提供了多种组件通信方式，适用于不同的场景：

• 父子组件通信：

  • 父组件通过 props 传递数据给子组件。
  • 子组件通过 $emit 向父组件发送事件，并可以携带数据作为参数。

• 兄弟组件通信：

  • 在 Vue 2 中可以通过中央事件总线（EventBus）实现。
  • 使用 Vuex 或 Pinia 等状态管理工具。

• 跨层级组件通信：

  • 使用 provide 和 inject 进行依赖注入，避免逐级传递数据。

• 全局通信：

  • 使用 Vuex、Pinia 等全局状态管理工具。
  • Vue 3 的 mitt 库可以作为轻量级的事件总线。

• Ref 方式（Vue 3 新特性）：

  • 使用 ref 将组件实例暴露给父组件，通过访问组件实例调用其方法。

常见面试陷阱：

• props 是否支持双向绑定？
  • 答：不直接支持，可以通过 sync 修饰符或自定义事件间接实现双向绑定。

<!-- 父组件 -->
<ChildComponent :value.sync="parentValue" />

<!-- 子组件 -->
props: ['value'],
methods: {
  updateValue(newValue) {
    this.$emit('update:value', newValue);
  }
}

3. Vue 的生命周期是什么？

答：
Vue 的生命周期是组件从创建到销毁的整个过程。不同阶段提供了特定的生命周期钩子函数，可以在适当时机执行特定操作。
Vue 2 生命周期：

• 创建阶段：
  beforeCreate： 实例初始化之前调用，此时数据和方法均未被挂载。
  created： 实例创建完成后调用，数据已经被挂载，可以进行 API 请求等操作。
• 挂载阶段：
  beforeMount： 挂载之前调用，虚拟 DOM 已经创建，但尚未渲染到页面。
  mounted： 挂载完成后调用，真实 DOM 已渲染。
• 更新阶段：
  beforeUpdate： 响应式数据更新时调用，尚未更新 DOM。
  updated： DOM 更新完成后调用。
• 销毁阶段：
  beforeDestroy： 实例销毁前调用，可以清理事件监听或定时器。
  destroyed： 实例销毁后调用。

Vue 3 生命周期：

• Vue 3 引入 Composition API，将生命周期重命名并与 setup 结合：
  • onBeforeMount 和 onMounted 对应挂载。
  • onBeforeUpdate和 onUpdated 对应更新。
  • onBeforeUnmount 和 onUnmounted 对应销毁。

注意：

• 在 Vue 3 的 setup 中不能使用 this，需要依赖 ref 和 reactive。

面试延伸：

• 哪些操作适合放在 mounted 中？
  • DOM 操作、事件监听、第三方库初始化。
• 使用生命周期时如何避免内存泄漏？
  • 清理定时器和事件监听，避免组件销毁后未释放资源。

4. 如何优化 Vue 应用性能？

答：
性能优化是 Vue 面试的重点，以下是一些常见方法：
组件懒加载：

• 使用 dynamic import 动态加载组件，减少初始加载时间。
• 配合 Webpack 的分包功能。
  路由懒加载：
• 在 Vue Router 中，通过动态导入实现按需加载。
  示例：

const Home = () => import('@/components/Home.vue');

使用 Keep-Alive：

• 缓存未销毁的组件状态。
• 适用于多页签场景。
• 减少 Watcher 数量：
• 优化 watch 和 computed，避免不必要的监听。

虚拟滚动：

• 对大数据量列表使用虚拟滚动库（如 vue-virtual-scroller）。

生产环境优化：

• 使用 Vue 的生产版本，移除开发模式下的调试代码。
• 配合 gzip 压缩和 CDN 加速。

SSR（服务端渲染）：

• 使用 Nuxt.js 优化首屏加载速度。

优化 DOM 渲染：

• 使用唯一的 key，减少 diff 运算。
• 将复杂的计算逻辑放在 computed 而非模板中。

面试延伸：

• 如何监控 Vue 应用性能？
  • 使用 Performance API 和浏览器开发者工具。
  • 引入性能监控平台（如 Sentry）。

5. 什么是 Vue 的 Composition API？

答：
Composition API 是 Vue 3 引入的一种新的组件逻辑组织方式，主要包括：

• setup 函数：
  • 是 Composition API 的入口，在组件实例创建之前执行。
  • 返回的数据和方法会暴露给模板使用。
• 响应式方法：
  • ref：用于定义单个响应式数据。
  • reactive：用于定义复杂的响应式对象。
• 生命周期钩子：
  • 如 onMounted、onUpdated，替代 Vue 2 的生命周期方法。
• 自定义 Hook：
  • 抽离可复用逻辑（如 API 请求、状态管理）。
    优势：
  • 更好地复用逻辑，适合复杂项目。
  • 更自然地支持 TypeScript。
• 面试延伸：
  • Composition API 和 Options API 有何区别？
    • Composition API 更关注逻辑组织，Options API 更关注功能分类。
    • 在大型项目中，Composition API 的可读性和扩展性更强。

6. 什么是 Vue 的 Virtual DOM？

答：
Virtual DOM 是 Vue 用于提高性能的一种优化机制，通过 JS 对象模拟真实 DOM。其主要过程包括：

• **创建：**根据模板或渲染函数生成虚拟 DOM 树。
• **对比：**通过 Diff 算法比较新旧虚拟 DOM 树。
• **更新：**将差异更新到真实 DOM。

面试延伸：

• 为什么 Virtual DOM 能提升性能？
  • 减少真实 DOM 的直接操作，避免浏览器的回流和重绘。
  • 集中修改 DOM，批量更新。
• Virtual DOM 和模板渲染的关系是什么？
  • 模板会被编译成渲染函数，渲染函数生成虚拟 DOM。

7. Vuex 与 Pinia 的区别是什么？

答：
Vuex 和 Pinia 是 Vue 中的状态管理工具，各有优缺点：

• 语法简洁性：
  • Vuex 强制要求通过 mutations 修改状态，代码较为冗长。
  • Pinia 提供更简洁的 API，直接通过 state 和 actions 修改。
• 类型支持：
  • Pinia 原生支持 TypeScript，Vuex 的 TS 支持需要额外配置。
• 模块化：
  • Pinia 的模块化设计更灵活，直接通过定义多个 Store 实现。
• 性能：
  • Pinia 轻量、性能优于 Vuex。