vue3-Hook

Hook

（1） Hook是用来作什么的？

vue3里面可以自定义hook 主要是用来存储一些复用的逻辑、变量的封装。相当于vue2里面的minins

（2）既然vue2有minins为什么vue3提出了Hook？

minins虽然实现了重复代码的提取，但是minins的缺点就是

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

（2）变量不好找，可读性不好，维护起来比较复杂

minins的声明周期调用的比引入他的组件快，即；minins的beforeCreate->组件的beforeCreate->mixins的Create->组件的Create

为了解决这些问题，于是有了Hook:

（1）不同于mixin, hook是函数，这样就可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

一个png转baseUrl的小例子

hook/index.ts

import { onMounted } from 'vue';

type Option = {
    el:string
}

export default function(option: Option):Promise<{baseUrl:string}>{
    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')
             
        }

    })


}

index,vue

<template>

  <div>
  <img src="./assets/test.png" width="300" height="300" id="img">
  </div>

</template>

<script setup lang="ts">
import useBase64 from './components/bzhan/hooks'
useBase64({el:"#img"}).then(res=>{
  console.log(res.baseUrl);
  
})

</script>

打印结果