Abstract: A function tool set based on Vue combined API.

This article is shared by Vueuse: I am not allowed to be the front-end of Vuer, your toolset is only LoDash! Author: Touch the fish on the front end.

What is vueuse?

A set of functions based on Vue combined API tools.

That’s how the official website defines it.

First, it is based on the Vue Composition Api, which can only be used in an environment that supports the Composition Api. What is a composite API?

Next, it is a functional toolset (analogous to lodash.js/ramda.js);

Simply put, it’s a library of tools that will get you out of work earlier.

Is Vueuse open source? What is the status quo?

Of course open source! github/vueuse

Star number: 6.3 K

Community activity: The community is very active, as of November 2021, Mr Has been integrated into the main line;

As of November 13, 2021, 172 libraries can be found on NPM, including the famous UI library, Element-Plus

Evan You, the famous open source author who is often mocked as “knowing a hammer Vue”, is also a gold sponsor of the library;

Install vueuse

npm i @vueuse/core
// or
yarn add @vueuse/core
Copy the code

Note: VueUse can be used for both Vue 2 and vue 3 in one package thanks to the power of Vue-demi!

Vue 3 Demo:

Using vite: github.com/vueuse/vueu…

Using Webpack: github.com/vueuse/vueu…

Vue 2 Demo: Vue CLI

Using the Vue CLI: github.com/vueuse/vueu…

Also, note the version of the library:

As of v6.0, vue3 requires vue >= v3.2; Vue2 relies on @vue/composition >@vue/composition >= v1.1

What can Vueuse do?

There’s a lot you can do, but in general it provides utility functions in the following categories:

  • animation

  • The browser

  • component

  • formatting

  • The sensor

  • State machine

  • Public methods

  • Listening to the

  • miscellaneous

This list is probably confusing, but there are too many ways to list them all.

Let me give you a few representative examples to give you a quick understanding of what these methods do and what their characteristics are;

Example 1: useMouse

<template>
  <div id="app">
    <h3>Mouse: {{x}} x {{y}}</h3>
  </div>
</template>
<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>
Copy the code

Effect:

Wooooow~~~

It’s so easy to use! Relatives, buy me!! (false)

After reading the source code, we can find that this short method does at least the following things:

  • Create two responsive objects x and y (Ref);

  • Add mouse event listener to Window, assign mouse coordinates to X and Y in real time; (Also made mobile compatible)

If this logic is put into a page, it will require at least 6 lines of code, which will increase the maintenance staff’s cost of understanding the page later.

Now, you only need one line of code;

In addition, this method also has component usage, suitable for the friend who loves the tag more

<UseMouse v-slot="{ x, y }">
  x: {{ x }}
  y: {{ y }}
</UseMouse>
Copy the code

Example 2: useInterval

As the name suggests, this method encapsulates the ability to delay repeated calls;

<script setup lang="ts"> import { useInterval } from '.' const { counter, pause, resume } = useInterval(200, { controls: True}) // counter a Ref object, which is reactive, Counter. Value equals the number of times already counted // pause() pause // resume() resume </script> <template> <div id="APP"> <p>Interval fired: {{ counter }}</p> </div> </template>Copy the code

Look at the results:

Does it work? It’s much easier to write setInterval by hand.

To implement such a set of methods by hand, we would need to write a lot of logical code in the business, let alone many lines.

And as we all know:

The more code you write, the more bugs you have, and the harder it is to maintain and understand.

From this point of view, the library is indeed a qualified functional toolset;

Example 3: useVModel

This is a great tool for those who often encapsulate components.

Start by creating a component: test.vue

<template> <div> name: <input v-model="_name"/> age: <input v-model="_age"/> sex: <input v-model="_sex"/> </div> </template> <script lang="ts" setup> import { useVModel } from '@vueuse/core' const props  = defineProps({ name: String, age: String, sex: String }) const emit = defineEmits(['update:name', 'update:age', 'update:sex']) const _name = useVModel(props, 'name', emit) const _age = useVModel(props, 'age', emit) const _sex = useVModel(props, 'sex', emit) </script>Copy the code

Next, use it in index.vue

<template>
  <div>
    <Test
    v-model:name="formData.name"
    v-model:age="formData.age"
    v-model:sex="formData.sex"
    ></Test>
    {{ formData }}
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue-demi';
import Test from './Test.vue'
const formData = reactive({
  name: 'lily',
  age: '8',
  sex: 'boy'
})
</script>
Copy the code

For friends who have component packaging needs, this method is recommended!

There is no need to write redundant code inside a component for component encapsulation of a single data flow. Just use the data returned by the useVModel as a reactive object.

This is so strong

Click to follow, the first time to learn about Huawei cloud fresh technology ~