Vue 3 hooks的基本使用及疑问

发布时间:2024年01月18日

前言

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将响应式变量,以及操作这个响应式变量的函数给返回,方便外部使用。

文章来源:https://blog.csdn.net/weixin_41897680/article/details/135669720
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。