面试题：Vue中实现懒加载提升首屏加载速度，简述常用的懒加载指令及原理

v - lazy：这并非Vue官方内置指令，可能是在一些特定库（如 vue - lazyload 库）中自定义的指令。通过在模板中给图片元素添加该指令，可实现图片的懒加载。例如：<img v - lazy="imageUrl" />，其中 imageUrl 是图片的地址。
vue - router 中的路由懒加载：在Vue Router配置路由时使用。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import('./components/About.vue')
    }
  ]
})

这里使用ES6的动态 import() 语法实现路由组件的懒加载，只有当访问到 /about 路由时，才会加载 About.vue 组件。

图片懒加载原理
- 以 v - lazy（基于 vue - lazyload 为例），它利用了浏览器的 IntersectionObserver API（如果浏览器不支持，会使用 scroll 事件模拟）。IntersectionObserver 可以异步观察目标元素与祖先元素或视口的交集变化情况。
- 当使用 v - lazy 的图片进入视口（或接近视口，可设置一定的偏移量）时，即目标图片与视口产生交集时，触发加载图片的操作，将图片的 src 属性设置为真实的图片地址，从而实现图片的懒加载，避免页面初始加载时加载大量图片，提升首屏加载速度。
路由懒加载原理
- 在Vue Router中使用 import() 语法实现懒加载。import() 返回一个 Promise，当路由被访问时，该 Promise 被 resolve，才会加载对应的组件代码。这使得在初始加载时，只有路由配置信息被加载，而组件代码在需要时才被下载和解析，减少了首屏加载的代码量，加快了首屏加载速度。

星途面试题库