学习Vue3 第二十八章（自定义Hooks）

小满zs

已于 2023-04-11 23:46:20 修改

阅读量1.2w

点赞数 28

分类专栏： Vue3 文章标签：学习前端 javascript

于 2022-03-04 16:50:52 首次发布

本文链接：https://blog.csdn.net/qq1195566313/article/details/123271189

版权

Vue3 专栏收录该内容

53 篇文章 4033 订阅

订阅专栏

本文探讨了Vue3中的自定义Hook如何改进了Vue2中Mixins的不足，如避免了数据和方法覆盖问题，并提高了代码可读性和维护性。通过示例展示了如何使用onMounted Hook处理图片加载，以及结合自定义指令实现元素尺寸变化监听。Vue3的Hook函数增强了组件间的逻辑复用，简化了代码结构。

摘要由CSDN通过智能技术生成

Vue3 自定义Hook

主要用来处理复用代码逻辑的一些封装

这个在vue2 就已经有一个东西是Mixins

mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能实现一次写代码，多组件受益的效果。

弊端就是会涉及到覆盖的问题

组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

第二点就是变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。

Vue3 的自定义的hook

Vue3 的 hook函数相当于 vue2 的 mixin, 不同在与 hooks 是函数
Vue3 的 hook函数可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

Vue3 hook 库Get Started | VueUse

案例

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/png')

        }
    })


}

案例二

自定义指令 + hooks 双管齐下

实现一个监听元素变化的hook

主要会用到一个新的API resizeObserver 兼容性一般可以做polyfill

但是他可以监听元素的变化执行回调函数返回 contentRect 里面有变化之后的宽高。

import { App, defineComponent, onMounted } from 'vue'

function useResize(el: HTMLElement, callback: (cr: DOMRectReadOnly,resize:ResizeObserver) => void) {
    let resize: ResizeObserver
        resize = new ResizeObserver((entries) => {
            for (let entry of entries) {
                const cr = entry.contentRect;
                callback(cr,resize)
            }
        });
        resize.observe(el)
}



const install = (app: App) => {
    app.directive('resize', {
        mounted(el, binding) {
            useResize(el, binding.value)
        }
    })
}

useResize.install = install

export default useResize