1.懒加载：
应用场景：下拉页面加载页面数据时，立即去加载数据，效率较低
目标（效果）：当组件进入可视区域之后才去发请求加载数据，没有进入可视区域前，ajax请求是不发的
思路：
如何判断一个dom元素是否进入了可见区域？
传统方式：获取dom的位置，手动判断。（距离页面顶部的距离 比较 滚动条卷起的高度，还要考虑元素自己的高度 ）
现在：直接判断元素进入可视区域的比例 （使用第三方@vueuse/core 中的 useIntersectionObserver ）
vueuse官网： https://vueuse.org/core/useIntersectionObserver/#usage
使用步骤：
步骤1：引入（没下载需要下载'@vueuse/core'）
import { useIntersectionObserver } from '@vueuse/core'
步骤2：在结构中用ref绑定要观察的目标容器|对象target
1. <template> 2. <div class="home-new" ref="target">
步骤3：使用其提供的逻辑
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为） // 2. target 是观察的目标容器 dom对象 | 组件对象 // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出 const { stop } = useIntersectionObserver( target, // target 是vue的对象引用。是观察的目标 // isIntersecting 是否进入可视区域，true是进入 false是移出 // observerElement 被观察的dom ([{ isIntersecting }], observerElement) => { // 在此处可根据isIntersecting来判断，然后做业务 如：if(isIntersecting){发ajax} }, )
实际中应用举例：
<template> <div class="home-new" ref="target"> <HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱"> <template #right> <XtxMore path="/abc" /> </template> <!-- 面板内容 --> <ul class="goods-list" v-if="list.length"> <li v-for="goods in list" :key="goods.id"> <RouterLink to="/"> <img :src="goods.picture" alt=""> <p class="name ellipsis">{{goods.name}}</p> <p class="price">¥{{goods.price}}</p> </RouterLink> </li> </ul> <HomeSkeleton v-else/> </HomePanel> </div> </template> <script> import { findNew } from '@/api/home.js' import HomePanel from './home-panel.vue' import HomeSkeleton from './home-skeleton' import { ref } from 'vue' import { useIntersectionObserver } from '@vueuse/core' export default { components: { HomePanel, HomeSkeleton }, setup () { const list = ref([]) const target = ref(null) // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为） // 2. target 是观察的目标容器 dom对象 | 组件对象 // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出 const { stop } = useIntersectionObserver( target, // target 是vue的对象引用。是观察的目标 // isIntersecting 是否进入可视区域，true是进入 false是移出 // observerElement 被观察的dom ([{ isIntersecting }], observerElement) => { // 在此处可根据isIntersecting来判断，然后做业务 if (isIntersecting) { // 目标可见， // 1. ajax可以发了，后续不需要观察了 stop() // 2. 发ajax console.log(target, stop, '可见,发ajax', isIntersecting) // findNew().then(data => { console.log('findNew', data) list.value = data.result }) } } ) return { list, target } } } </script>
封装（将ajax作为参数传入）
import { ref } from 'vue' import { useIntersectionObserver } from '@vueuse/core' /** * 功能: 数据懒加载 * * @param {*} fn 当目标可见时，要调用一次的函数 * @returns target: 要观察的目标（vue3的引用） */ const useLazyData = (fn) => { const target = ref(null) // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为） // 2. target 是观察的目标容器 dom对象 | 组件对象 // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出 const { stop } = useIntersectionObserver( target, // target 是vue的对象引用。是观察的目标 // isIntersecting 是否进入可视区域，true是进入 false是移出 // observerElement 被观察的dom ([{ isIntersecting }], observerElement) => { // 在此处可根据isIntersecting来判断，然后做业务 if (isIntersecting) { // 目标可见， // 1. ajax可以发了，后续不需要观察了 stop() // 2. 执行函数 fn() } } ) return target } export default useLazyData
2.自定义全局指令
业务场景：vue提供的指令不够用的情况下，考虑自定义全局指令
作用：通过自定义指令的方式达成图片懒加载
思路:
- 熟悉vue3中的全局指令定义 （类似于vue2中的全局指令）
- 以插件的形式注册全局指令（类似于前边以插件的形式注册全局组件）
- 编写图片懒加载指令的具体逻辑（类似于数据懒加载）
01定义格式：
// app是Vue实例。 e.g: app = createApp() app.directive('指令名', { // 省略其他生命周期钩子函数 // el： 使用了指令的dom // binding.value: v-指令名="binding.value就是这里表达式的值" mounted (el, binding) { console.log(el, binding.value) } })
02使用格式：
1. <元素 v-指令名="value" /> 2. <组件 v-指令名="value" />
03在main.js中注册插件
+ import defineDirective from '@/directives' createApp(App).use(store).use(router).use(componentPlugin) + .use(defineDirective) .mount('#app')
小结：vue2和vue3的指令
相同点：指令的应用场景，原理是一致的；
不同点：生命周期钩子函数名，指令定义的格式不一样。
vue2: Vue.directive()
vue3: const app = createApp(); app.diretive()
