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

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

<template>
  <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">&yen;{
   
   {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使用格式：

<元素 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()