Vue.js 面试题解析

数据绑定

问：Vue.js 是如何实现数据绑定的？

答： Vue.js 利用 Object.defineProperty() 方法，结合发布-订阅模式实现数据绑定。当 Vue 实例创建时，会遍历 data 选项中的属性，利用 Object.defineProperty() 为每个属性添加 getter 和 setter。当数据发生变化时，setter 函数会触发更新，通知所有订阅者。

组件化

问：Vue.js 中组件化的优势有哪些？

答：

  • 代码复用： 组件可被多次使用，减少代码冗余。
  • 模块化开发： 将复杂应用拆分为独立组件，提高开发效率和可维护性。
  • 可测试性： 组件可以独立测试，提高代码质量。

生命周期

问：请描述 Vue 实例的生命周期钩子函数。

答：

  • beforeCreate: 实例创建前调用。
  • created: 实例创建后调用。
  • beforeMount: 模板编译/挂载之前调用。
  • mounted: 模板编译/挂载之后调用。
  • beforeUpdate: 数据更新之前调用。
  • updated: 数据更新之后调用。
  • beforeDestroy: 实例销毁之前调用。
  • destroyed: 实例销毁之后调用。

路由

问：Vue Router 的两种模式是什么？

答：

  • Hash 模式： 使用 URL 中的 hash (#) 来模拟路由。
  • History 模式： 利用 HTML5 History API 实现更美观的路由。

计算属性与侦听器

问：计算属性和侦听器的区别是什么？

答：

  • 计算属性 基于响应式依赖进行缓存，只有依赖项发生变化时才会重新计算。
  • 侦听器 用于监听特定数据的变化，并在变化时执行回调函数。

虚拟 DOM

问：Vue.js 中虚拟 DOM 的作用是什么？

答： 虚拟 DOM 是真实 DOM 的 JavaScript 对象表示，通过对比新旧虚拟 DOM 的差异，将更新操作集中到真实 DOM 上，从而提高渲染效率。

指令

问：请列举一些常用的 Vue.js 指令。

答：

  • v-bind
  • v-model
  • v-for
  • v-if
  • v-on

状态管理

问：Vuex 的核心概念有哪些？

答：

  • State: 存储应用状态。
  • Getters: 获取 State 中的派生状态。
  • Mutations: 同步修改 State。
  • Actions: 异步操作，最终触发 Mutations 修改 State。
  • Modules: 将 Store 分割成模块。

组件通信

问：Vue 组件之间有哪些通信方式？

答：

  • Props & Events： 父子组件通信。
  • $emit & $on： 自定义事件通信。
  • Vuex： 状态管理模式。
  • Provide & Inject： 跨层级组件通信。
  • $refs：直接访问子组件实例。

性能优化

问：如何优化 Vue.js 应用的性能？

答：

  • 代码层面： 组件化、计算属性、v-for 使用 key、v-if 与 v-show 选择
  • 打包优化： 代码压缩、Tree Shaking、懒加载
  • 缓存策略： 利用浏览器缓存机制
  • 图片优化： 压缩图片、使用 WebP 格式
  • 服务端渲染 (SSR)： 提升首屏加载速度

安全

问：如何防止 XSS 攻击？

答：

  • 使用 v-html 指令时谨慎，对用户输入进行过滤和转义。
  • 使用 HTTP only cookies，防止跨站脚本攻击。
  • 启用 CSP (Content Security Policy)，限制页面加载的资源。

其他

问：你对 Vue 3.0 有哪些了解？

答：

  • Composition API
  • TypeScript 支持增强
  • 性能提升
  • Fragment, Teleport, Suspense 等新特性