Vue3 自定义Hook的作用

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

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

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

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

mixins弊端

1.会涉及到覆盖的问题

主要是因为mixins的生命周期比组件的快

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

 2 变量来源不明确（隐式传入）

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

Vue3 hook 库VueUse

封装了很多常用的功能，节省开发者的时间

Vueuse 是一个功能强大的 Vue.js 生态系统工具库，它提供了可重用的组件和函数，帮助开发者更轻松地构建复杂的应用程序。通过使用 Vueuse，开发者可以提高开发效率，改善应用质量，并与活跃的社区进行互动。无论是小型项目还是大型应用，Vueuse 都是一个值得探索和使用的工具库

Vue3 hook 库Get Started | VueUse

安装

npm i  @vueuse/core  

//若以上命令安装完后 运行项目报错可使用以下命令

npm update @vueuse/core

 vue 自动导入工具(提效)

 unplugin-auto-import 自动导入各库的方法

      // 需自动导入方法的库imports: ['vue','pinia','@vueuse/core','@vueuse/components']

 案例

<template><div><p>x的值：{{ x }}</p><p>y的值：{{ y }}</p></div>
</template><script lang="ts" setup>
import { useMouse } from "@vueuse/core";const { x, y } = useMouse({type: "page",touch: true,resetOnTouchEnds: false,initialValue: {x: 100,y: 200,},
});
</script>

自定义转base64的hooks 

父组件

<template><h4>官方定义好的hooks使用 及推荐hook库为vueUse</h4><img id="img" src="../public/vite.svg" alt="" />
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import toBase64 from "./components/twentyTwo_hooks";
toBase64({el: "#img",
}).then((res) => {console.log(res);
});
</script><style lang="less" scoped></style>

 toBase64.ts 自定义的hooks

// ts文件和在写steup语法是一致的
import { onMounted } from "vue";type Options = {el: string;
};type Return = {Base64: string | null;
};export default function (options: Options
): Promise<Return> {return new Promise((resolve) => {onMounted(() => {const file: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement; //增加断言 as HTMLImageElementconsole.log(file);file.onload = (): void => {// 图片加载完后再转base 不然会导致解析错误resolve({Base64: tobase64(file),});};let tobase64 = (el: HTMLImageElement): string => {let canvas = document.createElement("canvas"); //创建画布let ctx = canvas.getContext("2d"); //环境canvas.width = el.width;canvas.height = el.height;ctx?.drawImage(el,0,0,canvas.width,canvas.height);console.log(el.width); // 32console.log(canvas.toDataURL("image/png/svg"));return canvas.toDataURL("image/png/svg");};});});
}

vue官方自带的hooks

useAttrs, useSlots等

父组件

<template><h4>官方定义好的hooks使用 及推荐hook库为vueUse</h4><A title="123" num="456"></A>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import A from "./components/twentyTwo_A.vue";
</script>

 A.vue

<template><div class=""></div>
</template><script setup lang="ts">
import { ref, reactive, useAttrs, useSlots } from "vue";
let use = useAttrs();
console.log(use); //{title: '123', num: '456'}
</script><style lang="less" scoped></style>