Vue.js 面试题解析与解答

1. Vue 生命周期

问题： 描述 Vue 实例的生命周期，并在每个阶段简述可以进行的操作。

解答： Vue 实例的生命周期包含创建、挂载、更新、销毁四个阶段，每个阶段都对应着特定的钩子函数。

• 创建阶段：
  • beforeCreate：实例初始化之前，数据观测和事件机制尚未建立。
  • created：实例创建完成，可以访问数据，进行数据请求等操作。
• 挂载阶段：
  • beforeMount：虚拟 DOM 已经创建，但尚未挂载到页面。
  • mounted：实例已挂载到页面，可以操作 DOM 元素。
• 更新阶段：
  • beforeUpdate：数据更新时调用，虚拟 DOM 重新渲染之前。
  • updated：虚拟 DOM 重新渲染并更新到页面之后。
• 销毁阶段：
  • beforeDestroy：实例销毁之前调用，可以进行一些清理工作。
  • destroyed：实例销毁之后调用，Vue 实例的所有东西都会被解绑。

2. 双向数据绑定

问题： 解释 Vue 中的双向数据绑定原理。

解答： Vue 的双向数据绑定是通过数据劫持和发布订阅模式实现的。

• 数据劫持： 使用 Object.defineProperty() 方法监听数据对象的属性变化，当属性值发生改变时触发 setter，通知订阅者更新。
• 发布订阅模式： Vue 内部维护一个订阅者列表，当数据发生变化时，通知所有订阅者更新视图。

3. 组件通信

问题： 描述 Vue 组件之间常用的通信方式。

解答： Vue 组件之间常用的通信方式包括：

• Props 传递数据： 父组件通过属性将数据传递给子组件。
• Events 发送事件： 子组件通过 $emit 方法触发自定义事件，父组件监听该事件并进行处理。
• Vuex 状态管理： 适用于大型应用，通过集中式存储管理应用的所有组件的状态。
• Provide/Inject： 允许祖先组件向其所有子孙组件注入依赖，无论组件层次结构有多深。
• $attrs/$listeners： 用于多层级组件嵌套场景，传递属性和事件监听器。

4. 计算属性和侦听器

问题： 说明计算属性和侦听器的区别，并举例说明其应用场景。

解答：

• 计算属性： 基于响应式依赖进行缓存，只有在依赖发生变化时才会重新计算，适用于需要对数据进行复杂处理并缓存结果的场景。
• 侦听器： 当需要监听某个数据变化并执行异步操作或较大开销的操作时使用。

示例：

5. 虚拟 DOM

问题： 解释虚拟 DOM 的概念以及它在 Vue 中的作用。

解答： 虚拟 DOM 是真实 DOM 的 JavaScript 对象表示，Vue 使用虚拟 DOM 进行 diff 算法比较，找出差异部分进行 targeted update，从而提高页面渲染效率。