项目优化

图片懒加载，数据懒加载， 路由懒加载

1.图片懒加载原理

1.1 开始时 不设置src属性

1.2 图片在可视区域内,设置src 然后加载图片

1.3 使用API，intersectionObserver 可以用监听元素是否可见

1.4 实际开发中 在vueuse 使用 useIntersectionObserver

1.5 一般封装成全局指令  <img v-lazy="xxxx" ，配合app.use做成独立的插件。

2.数据懒加载

场景：我的主页上有很多个模块，每个模块都发ajax拿数据，并且是在组件创建时发的请求。这样有一个后果：靠近底层的模块其实用户都看不到，这个发请求浪费性能。

思路：判断当前模块是否可见，可见就发请求

做法： 封装一个自定义的hooks，接收一个回调，返回一个ref。这个ref可以用在模块的外层dom上 ： 当这个ref引用的dom可见是，就执行这个回调（发请求）

实操：借用vueuse, useIntersectionObserver去封装。（react生态中，有一个和vueuse类似的库： ahooks）