让开发事半功倍的VueUse

什么是VueUse

VueUse不是Vue.use，它是为Vue 2和3服务的是一组基于Composition API的实用函数。是目前世界上Star最高的同类型库之一。他功能丰富，与服务器端渲染/生成完美配合，无需任何捆绑程序可通过CDN直接使用

官网：

https://vueuse.org/

安装

npm

npm i @vueuse/core

cdn

<script src="https://unpkg.com/@vueuse/shared"></script> 
<script src="https://unpkg.com/@vueuse/core"></script>

使用导入

从@vueuse/core中导入所需要的使用的功能

import {
    useLocalStorage, useMouse, usePreferredDark } 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 当中导入了三个函数，useLocalStorage, useMouse, usePreferredDark 。

useLocalStorage 是一个用来持久化数据的方法，他会把数据持久化到本地存储中。

useMouse 是一个监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置。

usePreferredDark 是一个判断用户是否喜欢深色的方法，他会实时的判断用户是否喜欢深色的主题。

VueUse提供了大多数的工具函数

防抖节流： throttleFilter and debounceFilter

import {
    debounceFilter, throttleFilter, useLocalStorage, useMouse } from '@vueuse/core'

// changes will write to localStorage with a throttled 1s
const storage = useLocalStorage('my-key', {
    foo: 'bar' }, {
    eventFilter: throttleFilter(1000) })

// mouse position will be updated after mouse idle for 100ms
const {
    x, y } = useMouse({
    eventFilter: debounceFilter(100) })

上述代码是throttleFilter and debounceFilter

throttleFilter：通过节流的方式去改变localStore的值，

d