Vue面试精华：watch与computed差异及生命周期详解

Vue面试题主要关注两个关键知识点：watch和computed的区别，以及Vue组件的生命周期管理。 **Watch和Computed的区别：** - **watch**：这是一个特殊的生命期钩子，主要用于监听Vue实例中的数据变化，并在数据变化时执行自定义函数。watch没有缓存，只要数据源发生变化，无论是一次性还是多次，都会立即执行回调。此外，watch允许执行异步操作，这在需要在数据改变后执行耗时操作时非常有用。 - **Computed**：本质上是计算属性，它会基于其依赖的数据进行计算并返回结果。与watch不同，computed是惰性的，只有当相关的依赖（通常是其他计算属性或数据）发生变化时，才会重新计算。这意味着有缓存，避免了不必要的重复计算。 **Vue生命周期管理：** Vue组件的生命周期可以分为三个阶段：创建、运行和销毁。 1. **创建期间（beforeCreate, created, beforeMount, mounted）**： - **beforeCreate**：组件实例创建完成，但data和methods尚未初始化。 - **created**：数据和方法已初始化完成，但模板还未编译。 - **beforeMount**：模板编译完成，准备挂载到DOM，但DOM元素尚未插入。 - **mounted**：组件已挂载到DOM上，可以访问DOM节点并进行异步操作，页面可见。 2. **运行期间（beforeUpdate, updated）**： - **beforeUpdate**：数据发生改变但视图未更新之前，这时数据是最新的，但DOM还未更新。 - **updated**：数据和视图都已完成更新，DOM已反映新的数据。 3. **销毁期间（beforeDestroy, destroyed）**： - **beforeDestroy**：组件即将销毁前调用，实例仍可访问。 - **destroyed**：组件销毁后调用，所有绑定和事件监听将解除。 在组件间的生命周期钩子执行顺序中，遵循从父到子然后从子到父的规则。例如，在子组件更新过程中，先执行子组件的`beforeUpdate`，然后是子组件的`updated`，最后是父组件的`updated`。父组件的生命周期钩子会在子组件所有生命周期钩子执行完毕后触发。 总结来说，理解watch和computed的区别以及掌握Vue组件的生命周期对于面试者理解和优化Vue应用的性能至关重要，尤其是在处理数据驱动视图更新和性能优化方面。熟悉这些概念可以帮助开发者编写高效、易维护的代码。