最前端｜一文详解Vue3.x 中 hooks 函数封装和使用

hooks 是什么

vue3  中的  hooks  就是函数的一种写法，就是将文件的一些单独功能的 js 代码进行抽离出来进行封装使用。

它的主要作用是 Vue3 借鉴了 React 的一种机制，用于在函数组件中共享状态逻辑和副作用，从而实现代码的可复用性。

注意：其实  hooks  和  vue2  中的  mixin  有点类似，但是相对  mixins  而言， hooks  更清楚复用功能代码的来源, 更清晰易懂。

hooks 的优点

• hooks 作为独立逻辑的组件封装，其内部的属性、函数等和外部组件具有响应式依附的作用。

  
  

• 自定义 hook 的作用类似于 vue2 中的 mixin 技术，使用方便，易于上手。

  
  

• 使用 Vue3 的组合 API 封装的可复用，高内聚低耦合。

自定义 hook 需要满足的规范

示例如下：

const { nameRef, Fn } = useXX()

hooks 和 utils 区别

utils 是通用的工具函数，而 hooks 是对 utils 的一种封装，用于在组件中共享状态逻辑和副作用。

通过使用 hooks，您可以简化代码，并使其更具可读性和可维护性。

hooks 和 mixin 区别

优点：组件中相同代码逻辑复用；

缺点：

hooks 代码：

useCount.ts 函数示例：

import { ref, onMounted, computed } from 'vue';

export default function useCount {

    const count = ref(0);

    const doubleCount = computed(
      () => count.value * 2
    );

     const increase = (delta) => {
        return count.value + delta;
    }

    return {
      count,
      doubleCount,
      increase
    };

}

import useCount from "@/hooks/useCount";
  const {(count, doubleCount, increase)} = useCount;
  const newCount = increase(10); // 输出: 10

export default const countMixin = {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
      increase(delta){
        return this.count + delta;
    }
};

<script setup lang="ts">
import countMixin from '@/mixin/countMixin'
export default {
  mixins: [countMixin],
  mounted() {
    console.log(this.doubleCount) // 输出: 0
    const newCount = this.setIncrease(10) // 输出: 10
  },
  methods: {
    setIncrease(count) {
      this.increase(count)
    },
  },
}
</script>

这两个示例展示了使用 Hooks 和 Mixins 的代码风格和组织方式的不同。Hooks 使用函数式的方式来定义逻辑和状态，而 Mixins 则是通过对象的方式进行组合和共享代码。

Vue3 自定义 Hooks 是组件下的函数作用域的，而 Vue2 时代的 Mixins 是组件下的全局作用域。全局作用域有时候是不可控的，就像 var 和 let 这些变量声明关键字一样，const 和 let 是 var 的修正。Composition Api 正是对 Vue2 时代 Option Api 高耦合和随处可见 this 的黑盒的修正，Vue3 自定义 Hooks 是一种进步。

hooks 函数封装示例

import { ElNotification } from 'element-plus'
/**
 * @description 接收数据流生成 blob，创建链接，下载文件
 * @param {any} data 导出的文件blob数据 (必传)
 * @param {String} tempName 导出的文件名 (必传)
 * @param {Boolean} isNotify 是否有导出消息提示 (默认为 true)
 * @param {String} fileType 导出的文件格式 (默认为.xlsx)
 * */
interface useDownloadParam {
  data: any;
  tempName: string;
  isNotify?: boolean;
  fileType?: string;
}

export const useDownload = async ({
  data,
  tempName,
  isNotify = true,
  fileType = '.xlsx',
}: useDownloadParam) => {
  if (isNotify) {
    ElNotification({
      title: '温馨提示',
      message: '如果数据庞大会导致下载缓慢哦，请您耐心等待！',
      type: 'info',
      duration: 3000,
    })
  }
  try {
    const blob = new Blob([data])
    // 兼容 edge 不支持 createObjectURL 方法
    if ('msSaveOrOpenBlob' in navigator)
      return window.navigator.msSaveOrOpenBlob(blob, tempName + fileType)
    const blobUrl = window.URL.createObjectURL(blob)
    const exportFile = document.createElement('a')
    exportFile.style.display = 'none'
    exportFile.download = `${tempName}${fileType}`
    exportFile.href = blobUrl
    document.body.appendChild(exportFile)
    exportFile.click()
    // 去除下载对 url 的影响
    document.body.removeChild(exportFile)
    window.URL.revokeObjectURL(blobUrl)
  } catch (error) {
    console.log(error)
  }
}

<script setup lang="ts">
import { useDownload } from "@/hooks/useDownload";

const userForm = reactive({})
const userListExport = () => {
    new Promise(resolve => {
        $Request({
            url: $Urls.userListExport,
            method: "post",
            data: userForm,
            responseType: "blob"
        }).then((res: any) => {
            useDownload({
                data: res.data,
                tempName："用户列表"
            });
            resolve(res);
        });
    });
};
</script>

import { computed, ref, Ref } from 'vue'
// 定义hook方法
type CountResultProps = {
  count: Ref<number>,
  multiple: Ref<number>, // 计算属性
  increase: (delta?: number) => void,
  decrease: (delta?: number) => void,
}

export default function useCount(initValue = 1): CountResultProps {
  const count = ref(initValue)

  const multiple = computed(() => count.value * 2)

  const increase = (delta?: number): void => {
    if (typeof delta !== 'undefined') {
      count.value += delta
    } else {
      count.value += 1
    }
  }

  const decrease = (delta?: number): void => {
    if (typeof delta !== 'undefined') {
      count.value -= delta
    } else {
      count.value -= 1
    }
  }
  return {
    count,
    increase,
    decrease,
    multiple,
  }
}

<template>
   <p>count:{{count}}</p>
   <p>倍数:{{multiple}}</p>
   <div>
     <button @click="increase(1)">加一</button>
     <button @click="decrease(1)">减一</button> // 在模版中直接使用hooks中的方法作为回调函数
   </div>
</template>

<script setup lang="ts">
    import useCount from "@/hooks/useCount"
    const {count,multiple,increase,decrease} = useCount(10)
</script>

import { ref, onMounted, onUnmounted, Ref } from 'vue'

interface MousePosition {
  x: Ref<number>;
  y: Ref<number>;
}

export default function useMousePosition(): MousePosition {
  const x = ref(0)
  const y = ref(0)

  const updateMouse = (e: MouseEvent) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    document.addEventListener('click', updateMouse)
  })

  onUnmounted(() => {
    document.removeEventListener('click', updateMouse)
  })

  return { x, y }
}

<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>
<script lang="ts">
    import useMousePosition from '@/hooks/useMousePosition'
    const { x, y } = useMousePosition();
</script>

hooks 函数封装细节归纳

1.hooks 函数接收参数写法；

写法 1：参数通过 props 接收，先定义参数类型，内部再解构；

export function commonRequest(params: Axios.AxiosParams) {
  let { url, method, data, responseType = 'json' } = params
}

interface DeprecationParam {
  from: string;
  replacement: string;
  type: string;
}
export const useDeprecated = ({ from, replacement, type = 'API' }: DeprecationParam) => {}

// setup中

const { list: goodsList, getList: getGoodsList } = useList(axios.get('/url/get/goods'))
const { list: recommendList, getList: getRecommendList } = useList(
  axios.get('/url/get/recommendGoods')
)

export const useEscapeKeydown = (handler: (e: KeyboardEvent) => void) => {}

总结

Vue2 时代 Option Api ，data、methos、watch.....分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！

Vue3 时代 Composition Api，通过利用各种 Hooks 和自定义 Hooks 将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合。