vue3中的懒加载和自定义指令

谁借莪１个温暖的怀抱￠ 2023-10-03 11:25 8阅读 0赞

#### 1.懒加载： ####

--------------------

**应用场景：**下拉页面加载页面数据时，立即去加载数据，效率较低

**目标（效果）**：当组件进入可视区域之后才去发请求加载数据，没有进入可视区域前，ajax请求是不发的

--------------------

**思路：**

如何判断一个dom元素是否进入了可见区域？

**传统方式：**[获取dom的位置][dom]，手动判断。（距离页面顶部的距离 比较 滚动条卷起的高度，还要考虑元素自己的高度 ）

--------------------

**现在：**[直接判断元素进入可视区域的比例][Link 1] （使用第三方`@vueuse/core` 中的 `useIntersectionObserver` ）

vueuse官网： https://vueuse.org/core/useIntersectionObserver/\#usage

--------------------

**使用步骤：**

**步骤1：引入（没下载需要下载****'@vueuse/core'****）**

import { useIntersectionObserver } from '@vueuse/core'

**步骤2：在结构中用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提供的指令不够用的情况下，考虑自定义全局指令

**作用：**通过自定义指令的方式达成图片懒加载

**思路:**

1.  熟悉[vue3中的全局指令定义][vue3] （类似于vue2中的全局指令）
2.  以插件的形式注册全局指令（类似于前边以插件的形式注册全局组件）
3.  编写图片懒加载指令的具体逻辑（类似于数据懒加载）

--------------------

**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使用格式：**

<元素 v-指令名="value" />
    <组件 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()

[dom]: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
[vue3]: https://v3.cn.vuejs.org/api/application-api.html#directive