Vue3新玩具,让你写出更好的vue3代码

前端人

共 2955字,需浏览 6分钟

 ·

2021-11-22 23:05

前言

鬼哥推荐大家,想更好写出优秀vue3代码的,记得一定要看看

尤大大在一次直播中提到了 VueUse 的一个库。好奇了一下,点看看了看。好家伙啊, 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗?(因为我觉得 vue3hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!

什么是 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 position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const 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 中使用的函数


import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const el = ref()

function close ({
  /* ... */
}

onClickOutside(el, close)
</script>