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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/334072.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RIP基础实验配置

要使用RIP完成以上命令需求 1&#xff0c;首先划分ip地址 有图可见有四个网段需要划分 192.168.1.0/26 192.168.3.0/26 192.168.7.0/26 192.168.5.0/26 给两个骨干网段&#xff0c;给两个环回接口&#xff0c;由下图所示&#xff1a; 其次&#xff0c;规划好ip后在各个接口…

【论文阅读】Relation-Aware Graph Transformer for SQL-to-Text Generation

Relation-Aware Graph Transformer for SQL-to-Text Generation Abstract SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图&#xff0c;并利用 graph-to-sequence 模型来生成问题&#xff0c;其中每个节点只能与 k 跳节点通信。由…

YOLOv8-TensorRT C++ ubuntu部署

YOLOv8-TensorRT C ubuntu20.04部署 先要安装好显卡驱动、CUDA、CUDNN 以ubuntu20.04、显卡1650安装470版本的显卡驱动、11.3版本的CUDA及8.2版本的CUDNN为例 下载TensorRT 进入网站&#xff1a; https://developer.nvidia.com/nvidia-tensorrt-8x-download 进行勾选下载…

Java 全栈知识点问题汇总(上)

Java 全栈知识点问题汇总&#xff08;上&#xff09; 1 Java 基础 1.1 语法基础 面向对象特性&#xff1f;a a b 与 a b 的区别3*0.1 0.3 将会返回什么? true 还是 false?能在 Switch 中使用 String 吗?对equals()和hashCode()的理解?final、finalize 和 finally 的不同…

CSS常见元素类型 盒子模型

文章目录 常见元素类型块元素内联元素空元素修改元素类型测试元素类型 盒子模型标准文本流:外边距和内边距测试盒子模型 常见元素类型 块元素 常见块元素: div p h1~h6 ul li img 这些元素结束之后自带换行&#xff0c;一行只能存在一个元素&#xff0c;无法横向排列&#xf…

SpringBoot 项目中后端实现跨域的5种方式!!!

文章目录 SpringBoot 项目中后端实现跨域的5种方式&#xff01;&#xff01;&#xff01;一、为什么会出现跨域问题二、什么是跨域三、非同源限制四、Java后端 实现 CORS 跨域请求的方式1、返回新的 CorsFilter(全局跨域)2、重写 WebMvcConfigurer(全局跨域)3、使用注解 (局部跨…

智慧灌区解决方案:针对典型灌区水利管理需求

​随着国家对农业水利的重视,各地积极推进智慧灌区建设,以实现对水资源的精准调度和科学化管理。下面我们针对典型灌区水利管理需求,推荐智慧灌区解决方案。 一、方案构成智慧水利解决方案- 智慧水利信息化系统-智慧水利平台-智慧水利公司 - 星创智慧水利 一、方案构成 (一)水…

当MySql有字段为null,索引是否会失效

sql执行过程中,使用is null 或者is not null 理论上都会走索引,由于优化器的原因导致索引失效变成全表扫描,或者说是否使用索引和NULL值本身没有直接关系,和执行成本有关系。 数据行记录如何存储NULL值的&#xff1f; InnoDB 提供了 4 种行格式 Redundant:非紧凑格式,5.0 版…

openGauss:准备知识1【IP地址/SSH协议/PuTTY安装和使用】

最近研究在openEuler 22.03 LTS上使用openGauss数据库。如果想要远端访问服务器&#xff0c;那么就先要了解IP地址、SSH协议等内容。 IP代表“Internet Protocol”&#xff0c;是一种网络协议&#xff0c;它定义了计算机在网络上的地址和数据传输方式。简言之&#xff0c;可以…

机器人持续学习基准LIBERO系列6——获取并显示实际深度图

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo机器人持续学习基准LIBERO系列5——…

git 删除 submodule 子模块的步骤

实验有效&#xff0c;这里删除了两个 submodule。 1, 执行删除 submodule mkdir tmp1 && cd tmp1 && git clone --recursive ssh://gitaaa.bbb.ccc.git \ && cd ccc/ && git checkout -b abranch_01 \ && git submodule deinit -f…

内存泄漏检测组件的实现

内存泄漏是在没有自动GC的编程语言里面&#xff0c;经常发生的一些问题。要实现一个内存泄露的检测组件&#xff0c;有两个需求&#xff1a; 能够检测出来内存泄漏能够判断出来哪一个地方的申请没有释放&#xff08;哪一行引起的泄漏&#xff09; 方案1&#xff1a;借助mtrac…

【GitHub项目推荐--名校课程资源】【转载】

先引用一段话&#xff0c;今天推荐的所有 GitHub 项目创立动机几乎都是这个。本文会盘点清华、北大、斯坦福、中国科学技术大学、上海交大等学校的课程资源。 01. 浙江大学课程共享计划 上图截屏中的话就是出自该项目&#xff0c;浙江大学搞了一个课程共享计划&#xff0c;其…

龙芯+RT-Thread+LVGL实战笔记(30)——电子琴演奏

【写在前面】正值期末,笔者工作繁忙,因此本系列教程的更新频率有所放缓,还望订阅本专栏的朋友理解,请勿催更。笔者在此也简要声明几点: 有些硬件模块笔者并没有,如LED点阵、压力传感模块、RFID模块等,因此这些模块的相关任务暂时无法给出经过验证的代码。其实,教程进行…

Mysql中的日志系统

文章目录 1. 慢查询日志&#xff08;Slow Query Log&#xff09;1.1 是否开启慢查询日志1.2 开启慢查询日志&#xff0c;设置时间阈值1.2.1 修改文件my.ini1.2.2 重启mysql后配置生效 1.3 查看慢查询日志1.3.1 直接用文本编辑器打开1.3.2 使用mysqldumpslow进行分析 2. InnoDB …

IaC基础设施即代码:Terraform 使用 dynamic动态内联块 创建docker资源

目录 一、实验 1.环境 2.Terraform查看版本 3.Linux主机安装Docker 4.Terraform使用本地编译&#xff08;In-house&#xff09;的Providers 5.Docker-CE 开启远程API 6. Linux主机拉取镜像 7.Terraform 使用 dynamic动态内联块 创建资源 二、问题 1.Terraform 计划资源…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析&#xff0c;这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考&#xff1a;财经新闻数据 数据来源 新浪财经的新闻网&#xff0c;说实话&#xff0c;他这个网站做成这样就是用来爬虫的…

64.Spring事件监听的核心机制是什么?

Spring事件监听的核心机制是什么? spring的事件监听有三个部分组成 事件(ApplicationEvent) 负责对应相应监听器 事件源发生某事件是特定事件监听器被触发的原因监听器(ApplicationListener) 对应于观察者模式中的观察者。监听器监听特定事件,并在内部定义了事件发生后的响应…

方案解决:5G基站节能及数字化管理

截至2023年10月&#xff0c;我国5G基站总数达321.5万个&#xff0c;占全国通信基站总数的28.1%。然而&#xff0c;随着5G基站数量的快速增长&#xff0c;基站的能耗问题也逐渐日益凸显&#xff0c;基站的用电给运营商带来了巨大的电费开支压力&#xff0c;降低5G基站的能耗成为…

递归、搜索与回溯算法(专题六:记忆化搜索)

目录 1. 什么是记忆化搜索&#xff08;例子&#xff1a;斐波那契数&#xff09; 1.1 解法一&#xff1a;递归 1.2 解法二&#xff1a;记忆化搜索 1.2.1 记忆化搜索比递归多了什么&#xff1f; 1.2.2 提出一个问题&#xff1a;什么时候要使用记忆化搜索呢&#xff1f; 1.3 …