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
