VueUse is an open source project by Anthony Fu. It provides Vue developers with a large number of basic Composition API utility functions for Vue2 and Vue3.

It has dozens of solutions for common developer use cases, such as tracking ref changes, detecting element visibility, simplifying common Vue patterns, keyboard/mouse input, etc. This is a great way to really save development time, because we don't have to add all these standard features ourselves, just use them and use them (thanks again for your efforts).

I like the VueUse library because it really puts developers first when deciding what utilities to provide, and it's a well-maintained library because it keeps up with the current version of Vue.

What are the practical methods of VueUse?

If you want to see a complete list of each utility, it is recommended to read the official documentation. But to summarize, there are 9 types of functions in VueUse.

• Animation - includes easy-to-use transitions, timeouts and timing features

• Browser - can be used with different Screen controls, clipboard, preferences, and more

• Component - Provides shorthand for different component methods

• Sensors - Used to monitor different DOM events, input events and network events

• State (state) -Manage user state (global, local storage, session storage)

• Utility (utility method)--different utility methods, such as getters, conditionals, ref synchronization, etc.

• Watch --More advanced observer types, such as pauseable observers, abandoned observers and conditional observers

• Others - Different types of functionality for events, WebSockets and Web workers

Install Vueuse into a Vue project

VueUse One of the biggest features is that it is compatible with Vue2 and Vue3 with only one package!

There are two options for installing VueUse: npm or CDN

npm i @vueuse/core # yarn add @vueuse/core

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

It is recommended to use NPM because it is easier Understood, but if we use CDN, it may be accessed through window.VueUse.

Using npm, you can get the desired method through deconstruction:

import { useRefHistory } from '@vueuse/core'

useRefHistory to track changes in responsive data

useRefHistory tracks every change made to ref and stores it in an array. This allows us to easily provide undo and redo capabilities to our applications.

Let’s look at an example where we make a text area that can be undone

The first step is to create our basic component without VueUse - using ref, textarea, and buttons for undo and redo.

<template>
  <p> 
    <button> Undo </button>
    <button> Redo </button>
  </p>
  <textarea v-model="text"/>
</template>

<script setup>
import { ref } from &#39;vue&#39;
const text = ref(&#39;&#39;)
</script>

<style scoped>
  button {
    border: none;
    outline: none;
    margin-right: 10px;
    background-color: #2ecc71;
    color: white;
    padding: 5px 10px;;
  }
</style>

Next, import useRefHistory, and then extract the history, undo and redo attributes from text through useRefHistory.

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

const text = ref('')
const { history, undo, redo } = useRefHistory(text)

Whenever our ref changes and the history attribute is updated, a listener will be triggered.

In order to see what the bottom layer is doing, we print out the history content. And call the undo and redo functions when the corresponding button is clicked.