都vue3了，你还不知道vueuse强大的工具库？ |
您所在的位置：网站首页 › twitch不支持浏览器 › 都vue3了，你还不知道vueuse强大的工具库？ |
都vue3了，你还不知道vueuse强大的工具库？
|
众所周知，vue3.0版本带来最大的更新就是composition api，借助composition api写法，能够更好的封装常用代码逻辑，vueuse 就是这么一个工具集。里面封装了许多常用功能，开箱即用，非常方便。打开官网长这样： 从get started可以看到，npm包支持vue2及vue3版本 工具库划分了几个大类：broswer(浏览器相关)，Sensors(传感器相关)，Animation(动画相关)，这里举几个常用的例子，方便大家了解入门： broswer(浏览器相关) 点击复制文字：useClipboard Copy Copied! import { useClipboard } from '@vueuse/core' const source = ref('Hello') const { text, copy, copied, isSupported } = useClipboard({ source }) 复制代码 动态加载script：useScriptTag import { useScriptTag } from '@vueuse/core' useScriptTag( 'https://player.twitch.tv/js/embed/v1.js', (el: HTMLScriptElement) => { // do something }, ) 复制代码上面写法，会在组件挂载完成的时候自动加载，而在组件卸载的时候会自动卸载。如果需要手动控制script加载或卸载时机，也提供了手动控制的写法： const { load, unload } = useScriptTag( "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js", () => { // 加载完成后 do something }, { manual: true } ); 复制代码load跟unload方法可以让你手动控制什么时候加载/卸载脚本，自行调用即可 要注意的是，上面的代码是放在script 标签下，而不是setup中 可以看到，对比常规写法：document.createElement('script') -> 声明type -> 指定src地址 -> 挂载到页面上, 借助该工具函数能够大大简化代码。 获取授权信息 例如获取麦克风权限信息：usePermission import { usePermission } from '@vueuse/core' const microphoneAccess = usePermission('microphone') 复制代码该方法是基于浏览器permission api，存在浏览器兼容性，如果你刚好要使用到该方法，请注意查阅文档：传送门 Sensors(传感器相关) 获取dom元素位置及大小信息：useElementBounding import { ref } from 'vue' import { useElementBounding } from '@vueuse/core' export default { setup() { const el = ref(null) const { x, y, top, right, bottom, left, width, height } = useElementBounding(el) return { el } } }) 复制代码 监听窗口滚动：useWindowScroll import { useWindowScroll } from '@vueuse/core' const { x, y } = useWindowScroll() 复制代码 监听窗口大小变化：useWindowSize import { useWindowSize } from '@vueuse/core' const { width, height } = useWindowSize() 复制代码 Animation(动画相关) useTransition 该动画api可以控制动画开始时间，动画开始执行，执行后的回调,动画类型。例如下面是一个数字快速变化的效果，可以用于积分页面展示积分数字：{{ cubicBezierNumber.toFixed(2) }} const baseNumber = ref(0); const duration = 1500; const cubicBezierNumber = useTransition(baseNumber, { duration, transition: [0.75, 0, 0.25, 1], }); // 调用方法，改变数值 const changeValue => () => { baseNumber.value = baseNumber.value === 100 ? 0 : 100; } 复制代码 可控定时器：useIntervalFn， useTimeoutFn工具库提供了两个方法，可以让你编写定时器时更简洁： import { useIntervalFn, useTimeoutFn } from '@vueuse/core' const { pause, resume } = useIntervalFn(() => { /* ... */ }, 1000) const { start, stop } = useTimeoutFn(() => { /* ... */ }, 3000) 复制代码可以看到，如果采用原生写法，需要编写一个变量存放定时器，用于清除的时候调用。而该工具方法省略了这一步,并且当组件卸载时自动卸载定时器，也省略了在组件卸载生命钩子手动清除定时器 另外，如果一个页面中有多个定时器，可以用别名区分调用方法： const { pause: pauseTimer, resume } = useIntervalFn(() => { /* ... */ }, 1000); // 使用别名调用 pauseTimer() 复制代码 响应式storage数据如果页面上有一些数据需要存在本地，同时又想是响应式的数据，可以用这个方法： import { useStorage } from '@vueuse/core' // bind object const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' }) 复制代码改变state的值，页面数据也会响应式变化 throttledWatch 和 debouncedWatch如果你在watch中实现一些页面更新的操作，可以借助上面的两个方法轻松实现节流或防抖。 import { debouncedWatch } from '@vueuse/core' debouncedWatch( source, () => { console.log('changed!') }, { debounce: 500 } ) 复制代码 最后以上提到的这些只是文档中的部分内容，更多详细内容大家可以移步（官网）查看，用好这个工具库，能够很大程度上帮助你提升的项目代码质量。 扫码关注，及时获取最新内容更新 |
【本文地址】
今日新闻 |
推荐新闻 |