【Vuejs】1160- Vue 的新玩具 VueUse

2023-11-22 03:59

本文主要是介绍【Vuejs】1160- Vue 的新玩具 VueUse,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1e647c01b2a0a0cbd40b6df0c4087e1e.png

前言

上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库。好奇了一下,点看看了看。好家伙啊, 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗?(因为我觉得 vue3hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili

长按识别二维码查看原文

https://www.bilibili.com/video/BV1x54y1V7H6

6bc270e217b797bb7a1dc91e3f1d19ca.png      

什么是 VueUse

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。

简单上手

安装 VueUse

npm i @vueuse/core

使用 VueUse

// 导入
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'export default {setup() {// tracks mouse positionconst { x, y } = useMouse()// is user prefers dark themeconst isDark = usePreferredDark()// persist state in localStorageconst store = useLocalStorage('my-storage',{name: 'Apple',color: 'red',},)return { x, y, isDark, store }}
}

上面从 VueUse 当中导入了三个函数, useMouseusePreferredDarkuseLocalStorageuseMouse 是一个监听当前鼠标坐标的一个方法,他会实时的获取鼠标的当前的位置。usePreferredDark 是一个判断用户是否喜欢深色的方法,他会实时的判断用户是否喜欢深色的主题。useLocalStorage 是一个用来持久化数据的方法,他会把数据持久化到本地存储中。

还有我们熟悉的 「防抖」 和 「节流」

import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from '@vueuse/core'// 以节流的方式去改变 localStorage 的值
const storage = useLocalStorage('my-key', { foo: 'bar' }, { eventFilter: throttleFilter(1000) })// 100ms后更新鼠标的位置
const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

还有还有在 component 中使用的函数

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'const el = ref()function close () {/* ... */
}onClickOutside(el, close)
</script><template><section ref="el">Click Outside of Me</section>
</template>

上面例子中,使用了 onClickOutside 函数,这个函数会在点击元素外部时触发一个回调函数。也就是这里的 close 函数。在 component 中就是这么使用

<script setup>
import { OnClickOutside } from '@vueuse/components'function close () {/* ... */
}
</script><template><OnClickOutside @trigger="close"><section>Click Outside of Me</section></OnClickOutside>
</template>

注意⚠️ 这里的 OnClickOutside 函数是一个组件,不是一个函数。需要package.json 中安装了 @vueuse/components

还还有全局状态共享的函数

// store.js
import { createGlobalState, useStorage } from '@vueuse/core'export const useGlobalState = createGlobalState(() => useStorage('vue-use-local-storage'),
)
// component.js
import { useGlobalState } from './store'export default defineComponent({setup() {const state = useGlobalState()return { state }},
})

这样子就是一个简单的状态共享了。扩展一下。传一个参数,就能改变 store 的值了。

还有关于 fetch, 下面👇就是一个简单的请求了。

import { useFetch } from '@vueuse/core'const { isFetching, error, data } = useFetch(url)

它还有很多的 option 参数,可以自定义。

// 100ms超时
const { data } = useFetch(url, { timeout: 100 })
// 请求拦截
const { data } = useFetch(url, {async beforeFetch({ url, options, cancel }) {const myToken = await getMyToken()if (!myToken)cancel()options.headers = {...options.headers,Authorization: `Bearer ${myToken}`,}return {options}}
})
// 响应拦截
const { data } = useFetch(url, {afterFetch(ctx) {if (ctx.data.title === 'HxH')ctx.data.title = 'Hunter x Hunter' // Modifies the resposne datareturn ctx},
})

更多

更多还的看VueUse 文档,还有另一个项目,说不定你就需要 vue-demi

长按识别二维码查看原文

https://vueuse.org/

0f6b27daee1437103aff66870acfa777.png      

长按识别二维码查看原文

https://github.com/vueuse/vue-demi

f4ea9e4d9149243ee550b79a9f84ad25.png      

作者:我只是一个小菜鸡

原文链接:https://juejin.cn/post/7029699344596992031

06688d69318e0919686f0834e853d9a7.gif

1. JavaScript 重温系列(22篇全)

2. ECMAScript 重温系列(10篇全)

3. JavaScript设计模式 重温系列(9篇全)

4. 正则 / 框架 / 算法等 重温系列(16篇全)

5. Webpack4 入门(上)|| Webpack4 入门(下)

6. MobX 入门(上) ||  MobX 入门(下)

7. 120+篇原创系列汇总

1a6e151e394c7d1f15f60592c2118a24.gif

回复“加群”与大佬们一起交流学习~

点击“阅读原文”查看 130+ 篇原创文章

这篇关于【Vuejs】1160- Vue 的新玩具 VueUse的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/407367

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求