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 HTMLImageElement
      console.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); // 32
        console.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>