一、VueUse——简介
- VueUse是由
Anthony Fu
等大佬写的基于Vue的自定义钩子集合。 - 类似于基于React的 ahooks
- 功能丰富:200+功能
- 无缝迁移:适用于Vue 3和Vue2.7版本之后
- 支持tree shaking:只引入自己需要的那部分,打包会更小
- 还有其他的亮点,可以去官网查看
二、VueUse——快速开始
1、安装
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
2、使用方法
三、最优的使用方法
1、解构
2、清除副作用
- 类似于Vue的
watch
和computed
,当组件卸载时将被处理掉,VueUse的功能也会自动清除副作用。 - 例如:useEventListener,当组件销毁时候,会自动调用
removeEventListener
来进行处理,无需手动处理。
所有的VueUse函数都遵循这个约定。
- 为了方便我们可以手动处理这些函数,一些函数返回一个
stop
处理程序:
- 虽然不是所有函数都返回处理程序,但更通用的解决方案是使用Vue中的 effectScope API。
3、传递Ref作为参数
- 在Vue中,我们使用
setup()
函数来构建数据和逻辑之间的“连接”。 - 为了使它更灵活,大多数VueUse函数也接受参数的
ref
版本。 - 规范使用的方式:通常
useTitle
返回一个反映页面标题的ref
。当你给ref
赋新值时,它会自动更新标题。
- 连接使用的方式:如果你认为有“关联”,你可以传递一个ref,使它绑定到页面的标题。
- Reactive Getter方式:从VueUse 9.0开始,引入了一个新的方式来传递“Reactive Getter”作为参数。
原文地址:https://blog.csdn.net/weixin_44733660/article/details/128703481
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_42202.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。