19.Vue3中的自定义Hook

自定义Hook主要用来做一些可以复用的代码逻辑的封装。减少重复代码的数量。 在Vue2中提供了Mixins可以实现抽离相同的代码逻辑，每一个组件只需要引入mixins就能实现代码的复用。 但是Mixins有很多弊端

1. 组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。
2. 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。

Vue3 的自定义的hook

Vue3的自定义Hook变为了函数

Vue3的hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用hooks函数且不会产生Mixins的一些问题。

Vue3 hook 库Get Started | VueUse里面通过Vue3的Hook实现了很多的实用功能。

案例1 收集用户鼠标点击的页面坐标

import {onMounted, onUnmounted, ref} from 'vue'
/*
收集用户鼠标点击的页面坐标
*/
export default function useMousePosition() {
    // 初始化坐标数据
    const x = ref(-1)
    const y = ref(-1)

    // 用于收集点击事件坐标的函数
    const updatePosition = (e: MouseEvent) => {
        x.value = e.pageX
        y.value = e.pageY
    }

    // 挂载后绑定点击监听
    onMounted(() => {
        document.addEventListener('click', updatePosition)
    })

    // 卸载前解绑点击监听
    onUnmounted(() => {
        document.removeEventListener('click', updatePosition)
    })

    return {x, y}
}

案例2 通过canvas把图片转换为base64格式字符串

import { onMounted } from 'vue'
 
type Options = {
    el: string
}
 
type Return = {
    Baseurl: string | null
}
export default function (option: Options): Promise<Return> {
 
    return new Promise((resolve) => {
        onMounted(() => {
            const file: HTMLImageElement = document.querySelector(option.el) as HTMLImageElement;
            file.onload = ():void => {
                resolve({
                    Baseurl: toBase64(file)
                })
            }
 
        })
 
 
        const toBase64 = (el: HTMLImageElement): string => {
            const canvas: HTMLCanvasElement = document.createElement('canvas')
            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
            canvas.width = el.width
            canvas.height = el.height
            ctx.drawImage(el, 0, 0, canvas.width,canvas.height)
            console.log(el.width);
            
            return canvas.toDataURL('image/p ng')
 
        }
    })
}