Vue’s new gameplay VueUse-tool library @vueuse/core

VueUseOfficial link
1. What is VueUse?
VueUse is not Vue.use! ! ! It is a collection of practical functions based on Composition API. The following are some specific usages
. 2. How to introduce
import { specific method} from '@vueuse/core'
3. Let's take a look at some specific usages
1. useMouse: monitor the current mouse A method of coordinates, which will obtain the current position of the mouse in real time.
2. usePreferredDark: a method to determine whether the user likes dark colors. It will determine whether the user likes dark themes in real time.
3. useLocalStorage: persist data to local storage. Medium example:
useLocalStorage(
'my-storage',
{ name: 'author', }, )

4. throttleFilter: throttling throttleFilter(100)
5. debounceFilter: anti-shake debounceFilter(100)
6. OnClickOutside: trigger a callback function when clicking outside the element
**Note: **The OnClickOutside function here is a component, not a function . Requires @vueuse/components installed in package.json.

import {
    
     OnClickOutside } from '@vueuse/components'
function close () {
    
    
  /* ... */
}
</script>

<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

7. Global state sharing function
createGlobalState
useStorage

8. For other specific methods, please see the documentation: such as the use of until, etc.