Mixins 和 Hooks的区别

什么叫 Hooks ,hooks是钩子的意思，既然是钩子那就可以延申到钩子函数，hooke还真是函数的一种写法；Vue3借鉴react hooks开发出了自己的hooks，hooks主要用来处理复用代码逻辑的封装；

在Vue2中，有一个叫 Mixins，也是将公共的逻辑抽离出来，这两者是非常像的；Mixins 是有一些弊端的，mixins的生命周期是比引入mixins的组件的生命周期调用快，前者会覆盖后者，mixins的生命周期调用比组件快，当我们在mixins定义一个变量的时候，主文件也是可以访问的，但是找的时候确实非常繁琐的，变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。

Mixins 和 Hooks两者相比，还是hooks用起来方便，hooks是一个函数，可以帮助我们提高代码的复用性

Vue3 hook库

Vue Use，这里面一共是有150多种，自定义hook封装的功能，感兴趣的可以看一看，通过npm i @vueuse/core安装，详细移步到官网阅读

Vue官方也是有自己定义的hooks，比如useAttrs的hooks,可以获取定义组件的所有数据，useSlots来获取插槽的数据

import { useAttrs } from 'vue';
s
const attr = useAttrs()

自定义hooks

这里我们定义一个hooks，将本地图片转化为base64格式；由于是公共的资源，新建一个hooks文件夹，hooks是一个函数，所以export default去导出这个功能，一般都是user为开头，做名称，遵循命名规则

<img id="img" width="600" height="300" src="./assets/123.png">

import userBase64 from './hooks'

封装的userBase64.ts；在onMounted,中获取img实例

 let img:HTMLImageElement = document.querySelector(option.el) as HTMLImageElement;

思路：onload在图片加载之后去运行，通过canvas绘图的方式是解析base64，drawImage画布用来绘制指定的位置，toDataURL这个方法就是解析base64格式，最后通过Promise异步加载，下面是完整代码

export default function(option:Option):Promise<{ baseUrl: string}> {
return new Promise((resolve) => {
  onMounted(() => {
    let img:HTMLImageElement = document.querySelector(option.el) as HTMLImageElement;
    img.onload = () => {
      resolve({
        baseUrl: base64(img)
      })
    }  
  })
  const base64 = (el:HTMLImageElement) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = el.width
    canvas.height = el.height
    ctx.drawImage(el, 0, 0, canvas.width, canvas.height)
    return canvas.toDataURL('image/png')
  }
})
}

页面引入使用，方法就是通过传入Dom的id,使用了new Promise的resolve,通过.then()的方式来监听返回的值

 userBase64({el: '#img'}).then(res => {
  console.log(res.baseUrl);
})

Vue3自定义Hooks

Mixins 和 Hooks的区别

Vue3 hook库

自定义hooks