做一个高端网站,网站内容搜索,网站模版源码,wordpress 主题演示今天博主为大家介绍一款实用性的插件名字叫做 VueUse #xff0c;它是专门为 Vue.js 生态系统设计的功能性工具集合。其提供了许多可重用的功能函数#xff0c;可以帮助开发者更轻松地构建 Vue.js 应用程序。其提供了大量的功能#xff0c;包括状态管理、副作用管理、组合式…
今天博主为大家介绍一款实用性的插件名字叫做 VueUse 它是专门为 Vue.js 生态系统设计的功能性工具集合。其提供了许多可重用的功能函数可以帮助开发者更轻松地构建 Vue.js 应用程序。其提供了大量的功能包括状态管理、副作用管理、组合式 API、浏览器 API 封装等中文文档如下地址 博主在下文将简述一下VueUse的适用性和实践性仅凭一篇文章也不可能对其面面俱到详细了解的朋友可以参考一下上面的文档深入学习闲话少说直接开始吧
初识VueUseVueUse 的构建者是 Anthony Fu傅立业。他是 Vue.js 生态系统的活跃贡献者之一也是 VueUse 这个功能性工具集的主要作者和维护者。其在 Vue.js 社区中拥有广泛的影响力他通过 VueUse 让开发者能够更轻松地构建 Vue.js 应用程序提高了开发效率受到了许多开发者的欢迎和好评。ok今天就开始讲解一下 Anthony Fu 这位大佬到底给我们提供了什么样的便利工具吧
VueUse适用性从官方文档讲解来看从 v4.0 开始它通过 vue-demi 的加持是可以在 Vue 2 和 3 中使用。所有我们是可以在v2和v3中进行使用该工具的。但是从v6.0开始VueUse要求 vue版本 v3.2 或者 vue/composition-api版本 v1.1。所以根据自己具体项目选择不同的版本文档查看吧如下 如下VueUse适应了和Vue相关的最火的脚手架和框架可谓算是一个比较系统完善的工具了。 终端执行如下命令安装VueUse目前博主安装的VueUse最新版本是 ^10.9.0
npm i vueuse/core
下载完成之后接下来完成一下官方文档给的一些案例来初识一下VueUse的魅力吧
获取鼠标移动位置以前我们要获取鼠标移动位置必须设置一个监控事件 mousemove 而对于VueUse来说调用相关API函数返回一个refs对象使用ES6的对象解构语法解构出来即可
script setup
import { watch, reactive } from vue
import { useMouse } from vueuse/core
// 获取响应式数据x轴数据和y轴数据
const { x, y } useMouse()watch((x, y), () {console.log(x轴位置: , x.value, y轴位置: , y.value)
})
// 如果想使用对象访问可以使用reactive()如下这里不再赘述
// const mouse reactive(useMouse())
// console.log(mouse.x)
/script 消除副作用官方文档阐明了类似于Vue的watch和computed当组件卸载时将被卸载VueUse的函数也会自动清除副作用我想大家可以一时不知道这是啥意思举个例子当你使用间隔定时器的时候如果你销毁组件的时候是不是要手动把定时器清掉如果不清除是不是占资源如下 由于你的一时大意忘记必须手动清除定时器导致组件销毁定时器仍然执行这是不是很糟糕 ok为了解决你丢三落四的毛病VueUse底层自动帮助你清除这种副作用定时器直接用无需再要你去手动去清除 效果如下果然组件销毁后定时器也没有再执行很nice啊 还有一种情况就是我想手动去控制事件的销毁而不是让其自动销毁否则就脱离了掌控了好吧VueUse也是考虑了这一点为了手动处理副作用一些函数是会返回一个stop方法如下
const stop useEventListener(mousemove, () {})
// 手动注销事件侦听器
stop()
当然并不是所有函数都会返回这个方法还有一个通用的方法这也是博主最喜欢使用的主要我懒得记住到底是哪个函数支持返回一个stop方法还不如使用通用方法一网打尽
import { effectScope } from vueconst scope effectScope()scope.run(() {// ...useEventListener(mousemove, () {})onClickOutside(el, () {})watch(source, () {})
})scope.stop()
这里还是以上面的定时器举例这里我要在子组件中自己控制定时器是否执行
templatedivh3我是子组件/h3div定时器的数值变化{{ num }}/divbutton clickscope.stop()我是子组件的按钮我想在内部阻止你/button/div
/templatescript setup langts
import { ref, effectScope } from vue
import { useIntervalFn } from vueuse/core;let num ref(0)
const scope effectScope()scope.run(() {useIntervalFn(() {num.valueconsole.log(num.value)}, 1000)
})
/script 接收响应式的参数为了更好的灵活性很多VueUse函数同样支持接收响应式的参数。以useTitle为例子useTitle返回一个响应式标题变量。当你给ref赋新值时它会自动更新标题
templateh2{{ title }}/h2
/templatescript setup langts
import { useTitle, useTimeoutFn } from vueuse/corelet title useTitle(Hello World)
useTimeoutFn(() {// 两秒后修改标题title.value Hello VueUse
}, 2000)
/script
如下看来非常的丝滑呀 接下来博主会将VueUse文档中所有出现过的API函数结合案例全部讲解一遍直接从入门到精通后面本篇文章会不断修改在下面添加新的文章链接每个链接会特定讲解某一块内容敬请期待如果你也感兴趣的话可以关注博主继续学习下去 未完待续。。。
