vue3的自定义指令钩子函数名称完全改变, 参数格式保持与vue2.x一致。

功能分析

1、触底加载是移动端分页方式最频繁的功能, 我们把它做成全局自定义指令。

2、触底加载用到的是浏览器的滚动事件 `onscroll`

3、频繁滚动性能调优用节流的方式处理

知识点整理

1、注册全局自定义指令`toBottom`

import { toBottom } from '@/utils/directive';app.directive('toBottom', toBottom); 

2、指令钩子函数定义 这里只用到 `mounted`、`beforeUnmount`

注意： vue2.x 的 bind、inserted、update、componentUpdated、unbind 名称全部停用

 // 指令是具有一组生命周期的钩子：  // 在绑定元素的 attribute 或事件监听器被应用之前调用  created() {},  // 在绑定元素的父组件挂载之前调用  beforeMount() {},  // 绑定元素的父组件被挂载时调用  mounted() {},  // 在包含组件的 VNode 更新之前调用  beforeUpdate() {},  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用  updated() {},  // 在绑定元素的父组件卸载之前调用  beforeUnmount() {},  // 卸载绑定元素的父组件时调用  unmounted() {}

3、指令写法

代码片段

4、指令用法

v-to-bottom:5="handleBottom"

(5: binding.arg参数, handleBottom: 指令执行的调用函数)

模版用法

指令回调方法定义

5、实现效果

效果展示

源码

1、入口文件：main.ts

import { createApp } from 'vue';import App from './App.vue';import './registerServiceWorker';import router from './router';import Vant from 'vant';import 'vant/lib/index.css';import store from './store';import { toBottom } from '@/utils/directive';const app = createApp(App);app.directive('toBottom', toBottom);app.use(Vant);app.use(store);app.use(router);app.mount('#app');

2、工具函数文件：utils/util.ts

/** * 页面滚动 * @param binding 绑定指令的参数 */function scrollCall(binding: any): void {    // 底部预留距离    const height = Number(binding.arg) || 50     // 滚动部分高度兼容 IE Chrome    const windowTop = document.body.scrollTop || document.documentElement.scrollTop;     // 浏览器所有内容高度 - 滚动部分高度    const contentHeight = document.documentElement.scrollHeight - windowTop;    // 可见区域高度 + 预留距离    const seeHeight = document.documentElement.clientHeight + height;    // 是否触底    const isBottom = contentHeight <= seeHeight;    // 绑定回调函数参数值    isBottom ? binding.value(true) : binding.value(false);}/** * 节流 * @param fn 方法 * @param wait 延时时间 * @returns  */function throttle(fn: Function, wait: number) {    let timer: Object| null = null;    return function(this: any) {        const context = this;        const args = arguments;        if(!timer) {            timer = setTimeout(function() {                fn.apply(context, args);                timer = null;            }, wait);        }    }}export {    throttle,    scrollCall}

3、 指令文件：utils/directive.ts

/** * 自定义触底指令 */const toBottom = {    mounted(el: Element, binding: Object): void { // 挂载        window.addEventListener('scroll',             throttle(                scrollCall.bind(this, binding),                 300            )        );    },    beforeUnmount(): void { // 卸载        window.removeEventListener('scroll', scrollCall);    },}export {    toBottom}

4、模板文件：views/ToBottomFetch.vue

<template>    <div class="to-bottom" v-to-bottom:5="handleBottom">        this page is to bottom        <h2>1: 标题信息占位</h2>        <h2>2: 标题信息占位</h2>        <h2>3: 标题信息占位</h2>        <h2>4: 标题信息占位</h2>        <h2>5: 标题信息占位</h2>        <h2>6: 标题信息占位</h2>        <h2>7: 标题信息占位</h2>        <h2>8: 标题信息占位</h2>        <h2>9: 标题信息占位</h2>        <h2>10: 标题信息占位</h2>        <h2>11: 标题信息占位</h2>        <h2>12: 标题信息占位</h2>        <h2>13: 标题信息占位</h2>        <h2>14: 标题信息占位</h2>        <h2>15: 标题信息占位</h2>        <h2>16: 标题信息占位</h2>    </div></template><script lang="ts">import { defineComponent } from 'vue';export default defineComponent({    name: 'ToBottom',    setup() {        /**         * 触底回调方法         * val binding.value(isBottom) 传递的参数         */        const handleBottom = (isBottom: boolean) => {            // TODO format data            isBottom && console.log('页面触底');        }        return {            handleBottom        }    }});</script><style scoped>.to-bottom{    width: 100%;      }</style>