面试题：Vue中常用哪些生命周期钩子实现懒加载的初步逻辑

Question

在Vue项目里，若要实现图片的懒加载功能，从生命周期钩子角度出发，列举出至少两个可能会用到的钩子函数，并简要说明在这些钩子函数中可以进行的懒加载相关操作步骤。

Answer 1

• mounted钩子函数：
  • 操作步骤：在mounted钩子函数中，可以获取页面中需要进行懒加载的图片元素。然后为这些图片元素添加滚动事件监听，当页面滚动到图片位置时，触发加载图片的操作。例如，可以使用IntersectionObserver API来实现判断图片是否进入视口，若进入视口则将图片的src属性设置为真实的图片地址，从而实现图片的加载。
• updated钩子函数：
  • 操作步骤：当组件数据发生变化，导致图片相关的状态改变（比如图片列表更新等情况），updated钩子函数会被触发。在此钩子函数中，可以重新检查新的图片元素是否需要进行懒加载处理，再次添加滚动监听等相关操作，确保懒加载功能在数据更新后依然正常工作。