Vue 3 hooks的基本使用及疑问

前言

vue3也用过一段时间了，hooks听说过，但是一直没有用过。公司的前端项目里也没有相应的应用，因此打算系统的学习一下。

hooks与普通函数的区别

以实现一个加法功能为例。

普通函数未抽离

<template>
  <div class="box">
    <div>sum的值是：{{ sum }}</div>
    <el-button type="primary" @click="add">加1</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const sum = ref(0);

const add = () => {
  sum.value++;
};
</script>

普通函数抽离

<template>
  <div class="box">
    <div>sum的值是：{{ sum }}</div>
    <el-button type="primary" @click="add">加1</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { addFn } from "./add.js";
const sum = ref(0);

const add = () => {
  sum.value = addFn(sum.value, 1);
};
</script>

const addFn = (a, b) => {
  return a + b;
};

export { addFn };

hooks

import { ref } from "vue";

const useAdd = (num) => {
  const sum = ref(0);

  const addFn = () => {
    sum.value += num;
  };

  // 将值和方法返回
  return {
    sum,
    addFn,
  };
};

// 导出hooks
export { useAdd };

<template>
  <div class="box">
    <div>sum的值是：{{ sum }}</div>
    <el-button type="primary" @click="addFn">加1</el-button>
  </div>
</template>

<script setup lang="ts">
// 导入hooks
import { useAdd } from "./add.js";
// 初始化
const { sum, addFn } = useAdd(1);
</script>

如上图，效果是一样的。也可以看出，当业务逻辑都是抽离出来时，hooks 比单独抽离出一个公共方法好一点。

但是封装成 hooks 一定是可以复用的逻辑，这样才有意义。但是什么情况应该封装成hooks，什么时候封装成普通函数呢？看了不少文章，没看到有什么明确的解释。

可能是hooks 听起来比函数更高级吧。当然可能是自己太菜了，没有理解，如果有大佬用的比较多，麻烦解释一下，对这块一直很疑惑，万分感谢。

基本使用

关于hooks 的定义，好像有两种方式。一种是文件名以use开头，另一种就是函数以use开头，也就是上面这种。我个人的话，比较喜欢函数以use开头。

hooks 与普通函数的区别可能就在于使用了vue的相关api。基本做法都是在函数里通过return将响应式变量，以及操作这个响应式变量的函数给返回，方便外部使用。