VueUse是AnthonyFu的一个开源项目,它为Vue开发人员提供了大量适用于Vue2和Vue3的基本CompositionAPI实用程序函数。
它有几十个解决方案,适用于常见的开发者用例,如跟踪Ref变化、检测元素可见性、简化常见的Vue模式、键盘/鼠标输入等。这是一个真正节省开发时间的好方法,因为你不必自己添加所有这些标准功能。
我喜欢VueUse库,因为它在决定提供哪些实用工具时真正把开发者放在第一位,而且它是一个维护良好的库,因为它与Vue的当前版本保持同步。
VueUse有哪些实用程序?如果你想看到每一个实用程序的完整列表,我绝对建议你去看看官方文档[1]。但总结一下,VueUse中有9种类型的函数。
Animation——包含易于使用的过渡、超时和计时功能。Browser——可用于不同的屏幕控制、剪贴板、偏好等。Component——提供了不同组件方法的简写。Formatters——提供响应时间格式化功能。Sensors——用来监听不同的DOM事件、输入事件和网络事件。State——管理用户状态(全局、本地存储、会话存储)。Utility——不同的实用函数,如getter、条件、引用同步等。Watch——更多高级类型的观察器,如可暂停的观察器、退避的观察器和条件观察器。Misc——不同类型的事件、WebSockets和webworkers的功能这些类别中的大多数都包含几个不同的功能,所以VueUse对于你的使用情况来说是很灵活的,可以作为一个很好的地方来快速开始构建Vue应用程序。
在本教程中,我们将看一下5个不同的VueUse函数,这样你就可以了解在这个库中工作是多么容易。
但首先,让我们将其添加到Vue项目中!
将VueUse安装到你的Vue项目中VueUse的最大特点之一是,它只用一个软件包就能同时兼容Vue2和Vue3!
安装VueUse有两种选择npm或CDN
npmi
vueuse/core#yarnaddvueuse/corescriptsrc="