实用的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;前提条件是多线程环境及…

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

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

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 …

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

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

快手正式推出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源…

Android Focused Window的更新

启动App时更新inputInfo/请求焦点窗口流程&#xff1a; App主线程调ViewRootImpl.java的relayoutWindow()&#xff1b;然后调用到Wms的relayoutWindow()&#xff0c;窗口布局流程。焦点窗口的更新&#xff0c;通过WMS#updateFocusedWindowLocked()方法开始&#xff0c;下面从这…

MIX OTP——监督树和应用

在上一章关于 GenServer 的内容中&#xff0c;我们实现了 KV.Registry 来管理存储容器。在某个时候&#xff0c;我们开始监控存储容器&#xff0c;这样每当 KV.Bucket 崩溃时&#xff0c;我们就能采取行动。虽然变化相对较小&#xff0c;但它提出了一个 Elixir 开发人员经常问的…

独家原创 | Matlab实现CNN-Transformer多变量时间序列预测

SCI一区级 | Matlab实现BO-Transformer-GRU多变量时间序列预测 目录 SCI一区级 | Matlab实现BO-Transformer-GRU多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CNN-Transformer多变量时间序列预测&#xff1b; 2.运行环境为Matlab2023b…

【JavaScript】JavaScript简介

希望文章能给到你启发和灵感&#xff5e; 如果觉得文章对你有帮助的话&#xff0c;点赞 关注 收藏 支持一下博主吧&#xff5e; 阅读指南 JavaScript入门&#xff08;1&#xff09;————JavaScript简介开篇说明一、什么是JavaScript二、JavaScript的使用2.1 开发工具的选择…

fiddler抓包工具

概念 概念&#xff1a; Fiddler是一个http协议调试代理工具&#xff0c;它能够记录并检查所有你的电脑和互联网之间的http通讯。 http&#xff1a;不加密&#xff0c;端口为80 https&#xff1a;加密&#xff0c;端口为443 原理&#xff1a; 其实就在访问服务器时&#xff0…

如何在写代码中找到乐趣

平时我们写代码呢&#xff0c;多数情况都是流水线式写代码&#xff0c;基本就可以实现业务逻辑了。 如何在写代码中找到乐趣呢&#xff0c;我觉得&#xff0c;最好的方式就是&#xff1a;使用设计模式优化自己的业务代码。 参考资料&#xff1a; 实战&#xff01;工作中常用到…

[方法] Unity 3D模型与骨骼动画

1. 在软件中导出3D模型 1.1 3dsmax 2014 1.1.1 TGA转PNG 3dsmax的贴图格式为tga&#xff0c;我们需要在在线格式转换中将其转换为Unity可识别的png格式。 1.1.2 模型导出 导出文件格式为fbx。在导出设置中&#xff0c;要勾选三角算法&#xff0c;取消勾选摄像机和灯光&#…

三秒4张图!让 Stable Diffusion 出图速度暴增的新一代生成模型LCM!

前言 大家好&#xff0c;这里是和你们一起探索 AI绘画月月~ 最近一种新的图像生成形式逐渐兴起&#xff0c;即生成的图像会随输入的文字或笔画动作迅速变化&#xff0c;这让图像生成有了更多灵活探索和准确控制的空间。这种「实时反馈」的感觉源于模型能在几秒钟内&#xff0…

fiddler 返回Raw乱码

有时会发现自己发送的请求后&#xff0c;返回结果Raw里面是乱码&#xff0c;可以勾选Decode并重新发送请求就解决了 这个时候将Decode勾选一下 此时就好了