实用的vueuseHooks,提高编码效率

文章目录

        • 写在前面
        • vueuse 官网
        • 安装
        • Hooks
          • useStorage [地址](https://vueuse.org/core/useStorage/)
            • 传统方法数据持久化 举例子
            • 传统持久化的弊端
            • useStorage 数据持久化 举例子
            • 使用useStorage 更改存储数据
            • 使用useStorage 删除存储数据
          • useScriptTag [地址](https://vueuse.org/core/useScriptTag/)
            • jQuery举例子
            • useScriptTag加载 jQuery
          • useDraggable [地址](https://vueuse.org/core/useDraggable/)
          • useOnline [地址](https://vueuse.org/core/useOnline/)
        • 写到后面

写在前面

今天写一下关于 vueuse中常用的 Hooks 功能函数,使用之后可以提高我们的开发效率,同时 bug 率也会降低,该文章只做基础用法,具体的 api 详细的各种操作,可以参考官网,根据自己的需要进行使用。

vueuse 官网

官网

安装
npm i @vueuse/core
Hooks
useStorage 地址

这个是用来操作本地存储,做数据持久化操作的,该方法替代了我们常用的localStorage和sessionStorage

传统方法数据持久化 举例子
// 本地 mock 数据
const useMockData = {id: 0,url: "www.baidu.com",userInfo: {name: "Kim",age: 20}
}
// TODO: 传统本地持久化存储方式
localStorage.setItem('mockLocalData', useMockData)
// TODO: 传统会话存储方式
sessionStorage.setItem('mockLocalData', useMockData)// TODO: 传统获取本地持久化数据
const getLocalData = localStorage.getItem('mockLocalData')
console.log('getLocalData', getLocalData) // getLocalData [object Object]// TODO: 传统获取本地会话数据
const getSessionData = sessionStorage.getItem('mockLocalData');
console.log('getSessionData', getSessionData) //getSessionData [object Object]

如果我们使用传统的方法进行数据持久化处理,当源数据是基本数据类型的时候,是可以直接进行存储的,但是如果我们的数据是一个对象或者复杂的数据类型,就无法直接进行存储,需要进行序列化的处理,比如下面的处理

// TODO: 传统本地持久化存储方式
localStorage.setItem('mockLocalData',  JSON.stringify(useMockData))
// TODO: 传统会话存储方式
sessionStorage.setItem('mockLocalData', JSON.stringify(useMockData))// TODO: 传统获取本地持久化数据
const getLocalData = JSON.parse(localStorage.getItem('mockLocalData')) 
console.log('getLocalData', getLocalData) // getLocalData {id: 0, url: 'www.baidu.com', userInfo: {…}}// TODO: 传统获取本地会话数据
const getSessionData = JSON.parse(sessionStorage.getItem('mockLocalData'));
console.log('getSessionData', getSessionData) //getSessionData {id: 0, url: 'www.baidu.com', userInfo: {…}}

出现这种现象的原因是:在JavaScript中,当你尝试将对象直接转换为字符串时,会调用对象的toString()方法。如果对象没有自定义的toString()方法,那么默认的Object对象的toString()方法会被调用,返回"[object Object]"作为字符串表示。

传统持久化的弊端
  • 复杂数据类型需要序列化处理,否则无法完成数据的存储和读取
  • 更改缓存的时候需要重新进行存储
useStorage 数据持久化 举例子
import { useStorage } from '@vueuse/core';// 本地 usecore mock 数据
const useCoreMockData = {id: 0,url: "www.baidu.com",userInfo: {name: "Kim",age: 20}
}
// TODO: 使用 useStorage 进行本地持久化存储
const useCoreLocalData = useStorage('useCoreMockData', useCoreMockData)
// 等同于 const useCoreLocalData = useStorage('useCoreMockData', useCoreMockData,localStorage)
console.log('useCoreLocalData', useCoreLocalData)// TODO: 使用 useStorage 进行会话存储
const useCoreSeesionData = useStorage('useCoreMockData', useCoreMockData, sessionStorage)
console.log('useCoreSeesionData', useCoreSeesionData)

在这里插入图片描述
在这里插入图片描述

可以看到,我们存储数据的时候,本身对复杂数据类型没有做任何处理,直接将数据进行了处理,是完全可以达到传统存储的序列化之后的效果的,另外useStorage默认使用的是localStorage,第三个参数是存储方式,可以选择持久化存储还是会话级存储。

使用useStorage 更改存储数据
// TODO: 点击操作本地数据
const handleUseCoreLocalData = () => {useCoreLocalData.value.id = 1console.log('useCoreLocalData', useCoreLocalData.value)
}

在这里插入图片描述

使用useStorage 删除存储数据
// TODO: 删除本地存储数据
const removeLocalData = () => { useCoreLocalData.value = nullconsole.log('useCoreLocalData', useCoreLocalData.value)
}

在这里插入图片描述

useScriptTag 地址

该标签是用来加载 js 脚本的,比如你在项目中需要使用某个 js,但是这个 js 只能通过 script 标签的方式进行加载使用,那么我们一般是可以在入口文件的时候将该 js 加载出来进行使用,但是这样不是非常的优雅,useScriptTag就是解决这个问题的,比如下面,我们希望使用jQuery的方法获取当前页面的某一个 dom 元素

jQuery举例子
const handleJs = () => {const el = $("#content");console.log("🚀 clearlove  - Log ~ handleJs ~ el: ", el);
};

在这里插入图片描述

这里肯定是会报错的,因为 jQuery 的脚本不存在,那么$自然也是不可以用的

useScriptTag加载 jQuery
<button @click="handleJs">获取 dom 元素</button>
<h1 id="content">scripttag</h1>
import { useScriptTag } from "@vueuse/core";
const handleJs = () => {useScriptTag("https://code.jquery.com/jquery-3.7.1.slim.min.js", () => {// 获取 dom 元素const el = $("#content");console.log("🚀 clearlove  - Log ~ handleJs ~ el: ", el);});
};

在这里插入图片描述

可以看到这里就可以直接获取到当前的dom元素,我们也可以按照时机进行加载,具体的可以看文档描述

useDraggable 地址

可以让你自由拖动DOM 元素的Hooks

<template><div><h1 ref="dragDom" :style="style" style="position: fixed">你可以尝试拖动我</h1></div>
</template>
<script setup>
import { ref } from "vue";
import { useDraggable } from '@vueuse/core'
const dragDom = ref(null);const { x, y, style } = useDraggable(dragDom, {initialValue: { x: 140, y: 140 },
})</script>

在这里插入图片描述

useOnline 地址

判断当前用户的联网情况,还是比较实用的

import { useOnline } from '@vueuse/core'
const online = useOnline()
<template>status:{{ online }}
</template>

在这里插入图片描述

写到后面

类似的功能还有很多,这里就不一一列举,感兴趣的可以自行阅读文档即可,这些东西确实可以很大程度的节省开发时间,同时也可以避免我们因为实现某个小功能导致的代码缺陷,还是很有用的!

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

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

相关文章

matlab中simulink仿真软件的基础操作

&#xff08;本内容源自《详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真》 刘学勇编著的第二章内容&#xff0c;有兴趣的可以阅读该书&#xff09; 例&#xff1a;简单系统输入为两个不同频率的正弦、余弦信号&#xff0c;输出为两信号之和&#xff0c;建立模型。 在…

论文阅读_OpenAI嵌入+Lucene

英文名称: Vector Search with OpenAI Embeddings: Lucene Is All You Need 中文名称: 使用OpenAI嵌入进行向量搜索&#xff1a;只需Lucene 链接: http://arxiv.org/abs/2308.14963v1 作者: Jimmy Lin, Ronak Pradeep, Tommaso Teofili, Jasper Xian 机构: 滑铁卢大学戴维切里顿…

锁机制 -- 概述篇

锁机制 1、概述 ​  加锁是为了解决并发场景下&#xff0c;多个线程对同一资源同时进行操作&#xff0c;而导致同一线程多次操作出现结果不唯一的情况&#xff08;一次操作包含多条指令&#xff09;。结果不唯一发生的原因在于指令的错乱&#xff0c;前提条件是多线程环境及…

k8s_如何查看container拉取的镜像

当 Kubernetes (k8s) 使用 containerd 作为容器运行时时,可以通过以下方法查看 Kubernetes 集群中拉取的镜像。可以直接在每个节点上使用 containerd 的命令行工具 ctr 来查看已经拉取的镜像。 方法一:使用 ctr 查看节点上的镜像 确保 containerd 已安装并运行: 在 Kuberne…

全面解析:微软Edge浏览器支持的PDF文件操作功能

微软Edge浏览器&#xff0c;作为Windows 10及更高版本操作系统的默认浏览器&#xff0c;不仅提供了快速、安全的网页浏览体验&#xff0c;还内置了对PDF文件的多种操作功能。本文将详细探讨Edge浏览器支持的PDF文件操作&#xff0c;帮助用户更有效地利用这一功能强大的浏览器。…

双指针算法第一弹(移动零 复写零 快乐数)

目录 前言 1. 移动零 &#xff08;1&#xff09;题目及示例 &#xff08;2&#xff09;一般思路 &#xff08;3&#xff09;双指针解法 2. 复写零 &#xff08;1&#xff09;题目及示例 &#xff08;2&#xff09;一般解法 &#xff08;3&#xff09;双指针解法 3. 快…

61.ThreadLocal认识和使用

ThreadLocal介绍 ThreadLocal类用来提供给线程内部的局部变量。 这种变量在多线程环境下访问(通过get和set方法访问)时能保证各个线程的变量相对独立于其他线程内的变量。 ThreadLocal实例通常来说都是private static类型的,用于关联线程和线程上下文。 ThreadLocal的作用…

MySQL之索引创建原则

索引创建原则有哪些&#xff1f; 1.针对数据量较大&#xff0c;且查询比较频繁的表建立索引。&#xff08;单表超过10w数据&#xff09; 2.针对常作为查询条件&#xff08;where&#xff09;、排序&#xff08;order by&#xff09;、分组&#xff08;group by&#xff09;操…

Hadoop 安装与伪分布的搭建

目录 1 SSH免密登录 1.1 修改主机名称 1.2 修改hosts文件 1.3 创建hadoop用户 1.4 生成密钥对免密登录 2 搭建hadoop环境与jdk环境 2.1 将下载好的压缩包进行解压 2.2 编写hadoop环境变量脚本文件 2.3 修改hadoop配置文件&#xff0c;指定jdk路径 2.4 查看环境是否搭建完成 3 …

Clickhouse 常见操作

数据查询 从json array string中解析字段 json array string 为json.dumps(array(dict)) select JSONExtractString(row,"Date") as Date from( select arrayJoin(JSONExtractArrayRaw(Remarks)) as row from table x )JSONExtractArrayRaw&#xff1a; 将JsonS…

python中的相对路径

在Python中&#xff0c;相对路径是相对于当前工作目录&#xff08;由os.getcwd()返回&#xff09;的路径。当你想要引用当前目录、父目录或子目录中的文件或目录时&#xff0c;你会使用相对路径。 以下是一些常见的相对路径写法&#xff1a; 引用当前目录下的文件或目录&#…

C# Modbus设备信息加载的实现方式(2)

GlobalProperties是一个全局的数据&#xff0c;类似CoreData&#xff1a; public class GlobalProperties{public static Device Device { set; get; }public static Action<int, string> AddLog;public static SysAdmin CurrentAdmin;public static ModbusTCP Modbus { …

基于Spring Boot的药房信息管理系统

1 项目介绍 1.1 研究的背景及意义 随着社会的飞速进步和药房行业竞争的白热化&#xff0c;传统的手工管理模式已难以适应药房信息管理的现代化需求。在计算机科学技术日臻完善的背景下&#xff0c;药房信息管理者们日益认识到运用计算机技术进行信息管理的迫切性和重要性。计…

【Git】LFS

什么是lfs Git 是分布式 版本控制系统&#xff0c;这意味着在克隆过程中会将仓库的整个历史记录传输到客户端。对于包涵大文件&#xff08;尤其是经常被修改的大文件&#xff09;的项目&#xff0c;初始克隆需要大量时间&#xff0c;因为客户端会下载每个文件的每个版本**。Gi…

快手正式推出Vision Pro版本,引领虚拟现实社交新潮流

6月28日&#xff0c;快手正式推出其专为Apple Vision Pro打造的版本——快手vp版app&#xff0c;成为国内首批登陆Apple Vision Pro的短视频平台。 借助先进的虚拟现实技术&#xff0c;用户可以在快手上体验更真实生动的视频内容&#xff0c;无论是观看趣味短视频内容&#xf…

产品是应该有生命力的

产品是应该有生命力的 在日新月异的商业环境中&#xff0c;产品被寄予厚望&#xff0c;不仅仅满足基本功能需求&#xff0c;而是要能够自我革新&#xff0c;适应市场和技术的快速变化&#xff0c;以及持续吸引并留住用户。 这种生命力体现在产品的迭代升级能力、对用户需求的精…

[鹏城杯 2022]babybit

发现一个压缩包提取出来提取出来两个压缩包里面是注册表使用MiTeC Windows Registry Recovery 恢复注册表 flag在ROOT\ControlSet001\Control\FVEStats里的OsvEncryptInit和OsvEncryptComplete中 NSSCTF{2022/6/13_15:17:39_2022/6/13_15:23:46}

互联网信任危机:Perplexity搜索引擎如何破坏内容创作者的权益

前段时间&#xff0c;Perplexity搜索引擎还是一颗冉冉升起的明日之星&#xff0c;手握巨额投资&#xff0c;有很美好的未来前景&#xff0c;这时&#xff0c;如果不出意外的话&#xff0c;要出意外。 喜好儿网 Perplexity这家公司&#xff0c;它正试图通过创建一个新型的“答…

LoRaWAN网关源码分析(基础概念篇)

目录 一、简介 1、lora_gateway 2、packet_forwarder 二、目录结构 1、lora_gateway 2、packet_forwarder 一、简介 LoRaWAN网关的实现主要依赖两个源代码&#xff1a;lora_gateway和packet_forwarder。接下来&#xff0c;我们将从分析源代码入手&#xff0c;移植LoRaWAN源…

LeetCode:经典题之21、24 题解及延伸

系列目录 88.合并两个有序数组 52.螺旋数组 567.字符串的排列 643.子数组最大平均数 150.逆波兰表达式 61.旋转链表 160.相交链表 83.删除排序链表中的重复元素 389.找不同 1491.去掉最低工资和最高工资后的工资平均值 896.单调序列 206.反转链表 92.反转链表II 141.环形链表 …