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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 GD32 瑞萨 psoc 等单片机 无线wifi蓝牙最佳解决方案

新联鑫威一系列低功耗高性价比sdio wifi/蓝牙combo的模块CYWL6208 , CYWL6312, CYW6209等可以搭配stm32 各种型号例如以下,支持sta/ap/apsta&#xff0c;双模蓝牙的应用&#xff0c;支持rt-thread, freertos, Azure RTOS, Linux, Android系统. 稳定强&#xff0c;功耗低&#x…

HFSS笔记/信号完整性分析(二)——软件仿真设置大全

文章目录 1、多核运算设置1.1 如何设置1.2 如何查看自己电脑的core呢&#xff1f;1.3 查看求解的频点 2、求解模式设置Driven Terminal vs Driven modal 3、Design settings4、自适应网格划分5、更改字体设置 仅做笔记整理与分享。 1、多核运算设置 多核运算只对扫频才有效果&…

Java项目:11 Springboot的垃圾回收管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 功能介绍 本系统通过利用系统的垃圾回收流程&#xff0c;提高垃圾回收效率&#xff0c;通过垃圾回收的申请&#xff0c;增删改查&#xff0c;垃…

stm32 FOC系列 直流有刷控制原理

1、直流有刷驱动板 使用三极管搭建的简易 H 桥电路&#xff0c;如图 5.3.1 所示&#xff1a; 图 5.3.1 是使用三极管搭建的简易 H 桥电路&#xff0c;其中 MOTOR 表示直流有刷电机&#xff0c; Q1、 Q2、 Q3 和 Q4 为 4 个三极管&#xff0c;其中 Q1 和 Q3 接在了电源正极&…

leetcode234. 回文链表

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;hea…

【已解决】Qt Creator设计模式被禁用不能点的原因及解决方案

Qt Creator 下载地址&#xff08;含历史版本&#xff09;&#xff1a;https://download.qt.io/official_releases/qtcreator/ 症状 Qt Creator 目前最新版为12.0.1&#xff0c;安装后打开.qml文件发现设计工具图标为禁用状态。 原因及解决方案 根据官网材料&#xff08;Qt C…

使用 TiUP 部署 TiDB 集群

TIDB优点 支持分布式且支持事务的关系型数据库&#xff0c;不用考虑分库分表 同时满足了可伸缩&#xff0c;高可用&#xff0c;关系型&#xff0c;支持事务。 基本上按官网的文档来就行了。 在线部署 以普通用户身份登录中控机。以 tidb 用户为例&#xff0c;后续安装 TiUP …

Red Hat Enterprise Linux 8.9 安装图解

引导和开始安装 选择倒计时结束前&#xff0c;通过键盘上下键选择下图框选项&#xff0c;启动图形化安装过程。需要注意的不同主板默认或者自行配置的固件类型不一致&#xff0c;引导界面有所不同。也就是说使用UEFI和BIOS的安装引导界面是不同的&#xff0c;如图所示。若手动调…

软件测试|SQLAlchemy query() 方法查询数据

简介 上一篇文章我们介绍了SQLAlchemy 的安装和基础使用&#xff0c;本文我们来详细介绍一下如何使用SQLAlchemy的query()方法来高效的查询我们的数据。 创建模型 我们可以先创建一个可供我们查询的模型&#xff0c;也可以复用上一篇文章中我们创建的模型&#xff0c;代码如…

RTC讲解

RTC&#xff08;Real Time Clock&#xff09;实时时钟 RTC实时时钟本质上是一个独立的定时器。RTC模块拥有一组连续计数的32位无符号计数器&#xff0c;在相应软件配置下&#xff0c;可提供时钟日历的功能。修改计数器的值可以重新设置系统当前的时间和日期。 RTC模块和时钟配…

【llm 使用llama 小案例】

huggingfacehttps://huggingface.co/meta-llama from transformers import AutoTokenizer, LlamaForCausalLMPATH_TO_CONVERTED_WEIGHTS PATH_TO_CONVERTED_TOKENIZER # 一般和模型地址一样model LlamaForCausalLM.from_pretrained(PATH_TO_CONVERTED_WEIGHTS) tokenize…

XHCMS靶场小记(熊海)

文件包含漏洞 template下的header.php中存在文件包含漏洞&#xff08;该文件被file文件夹下的多数文件进行包含&#xff09; f参数可以包含任意文件通过php格式解析&#xff08;这是文件包含点&#xff09; 代码分析 根目录下的index.php文件&#xff1b;r参数用于获取包含文…

计算机网络 网络安全

网络安全 网络安全问题概述 计算机网络面临的女全性威胁 计算机网络的通信而临两大类威胁&#xff0c;即被动攻击和主动攻击 被动攻击是指攻击者从网络上窃听他人的通信内容。通常把这类攻击称为截获。在被动攻击中&#xff0c;攻击者只是观察和分析某一个协议数据单元 PDU…

POKT Network (POKT) :进军百亿美元市场规模的人工智能推理市场

POKT Network&#xff08;又称 Pocket Network&#xff09;是一个去中心化的物理基础设施网络&#xff08;DePIN&#xff09;&#xff0c;它能够协调并激励对任何开放数据源的访问&#xff0c;最初专注于向应用程序和服务提供商提供区块链数据。 自 2020 年主网上线以来&#x…

Python笔记10-数据可视化练习折线图

文章目录 JSON数据Python数据和Json数据的相互转化pyecharts模块构建折线图全局配置绘制疫情数据折线图 JSON数据 JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据 。本质上是一个带有特定格式的字符串 主要功能&#xff1a;可以在各个编程语言中流通…

spring data mongo 在事务中,无法自动创建collection

spring data mongo 在事务中,无法自动创建collection org.springframework.dao.DataIntegrityViolationException: Write operation error on server xxx:30001. Write error: WriteError{code=263, message=Cannot create namespace xxx.xxxin multi-document transaction.…

【计算机网络】2、传输介质、通信方向、通信方式、交换方式、IP地址表示、子网划分

文章目录 传输介质双绞线无屏蔽双绞线UTP屏蔽双绞线STP 网线光纤多模光纤MMF单模光纤SMF 无线信道无线电波红外光波 通信方向单工半双工全双工 通信方式异步传输同步传输串行传输并行传输 交换方式电路交换报文交换分组交换 IP地址表示IP地址的定义IP地址的分类无分类编址特殊I…

基于 UniAPP 社区论坛项目多端开发实战

社区论坛项目多端开发实战 基于 UniAPP 社区论坛项目多端开发实战一、项目准备1.1 ThinkSNS 简介及相关文档1.2 使用 UniAPP 构建项目1.3 构建项目文件结构1.4 配置页面 TabBar 导航1.5 使用 npm 引入 uView UI 插件库 二、首页功能实现2.1 首页 header 广告位轮播图功能实现2.…

【占用网络】FlashOcc:基于2D卷积的占用预测模型

前言 FlashOcc是一个它只需2D卷积就能实现“占用预测模型”&#xff0c;具有快速、节约内存、易部署的特点&#xff0c;偏工程方向的工作。 它首先采用2D卷积提取图形信息&#xff0c;生成BEV特征。然后通过通道到高度变换&#xff0c;将BEV特征提升到3D空间特征。 对于常规…

C#,入门教程(20)——列表(List)的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(19)——循环语句&#xff08;for&#xff0c;while&#xff0c;foreach&#xff09;的基础知识https://blog.csdn.net/beijinghorn/article/details/124060844 List顾名思义就是数据列表&#xff0c;区别于数据数组&#xff08;arr…