Vue3 VueUse（组合式 API 工具库）

1. 简介

VueUse 是一个基于 组合式 API 的实用函数集合（或者说工具库），提供了一系列高效、可用的函数组合，用于简化 Vue 开发，提升效率。

没有了解过 组合式API 的同学，可以进入官网的 组合式函数，或者我之前写的 《Vue3 组合式函数（逻辑复用）》一章，先进行学习。

官网地址：https://vueuse.org/；
中文官网地址：https://vueuse.nodejs.cn/。

2. 核心函数分类

VueUse 的核心函数分类多样，大致分为以下几种：

1. State（状态管理）
2. Elements（元素）
3. Browser（浏览器）
4. Sensors（传感器）
5. NetWork（网络）
6. Animation（动画）
7. Component（组件）
8. Watch（监听）
9. Reactivity（反应式性）
10. Array（数组）
11. TIme（时间）
12. Utilities（实用工具）

每个分类下，又有十分丰富的API。

3. 快速上手

3.1 安装

npm i @vueuse/core

3.2 使用示例

3.2.1 简单示例

比如追踪鼠标位置的组合式函数 useMouse， App.vue：

<template><div>pos: {{ x }}, {{ y }}</div>
</template><script setup>
import { useMouse } from '@vueuse/core'// tracks mouse position
const { x, y } = useMouse()</script><style lang="scss" scoped></style>

3.2.2 综合示例

使用 VueUse 的 useToggle 和 useLocalStorage 方法，制作一个简单版本的待办事项。

子组件TodoItem.vue：

<template><li :class="{ completed: isCompleted }"><input type="checkbox" v-model="isCompleted" @change="toggleTask" /><span>{{ task.text }}</span><button @click="removeTask">删除</button></li>
</template><script setup>
import { defineProps, defineEmits, computed } from 'vue'const props = defineProps({task: {type: Object,required: true}
})
const emit = defineEmits(['remove', 'toggle'])const isCompleted = computed(() => props.task.completed)const removeTask = () => {emit('remove')
}const toggleTask = () => {props.task.toggleCompleted()
}
</script><style scoped>
li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;
}
li.completed span {text-decoration: line-through;color: #999;
}
input[type='checkbox'] {margin-right: 10px;
}
button {padding: 5px 10px;border: none;background-color: #ff4d4d;color: white;border-radius: 4px;cursor: pointer;
}
button:hover {background-color: #ff0000;
}
</style>

App.vue：

<template><div id="app" class="container"><h1>待办事项</h1><div class="input-container"><input v-model="newTask" placeholder="添加新的任务" /><button @click="addTask">添加</button></div><ul><TodoItem v-for="task in tasks" :key="task.id" :task="task" @remove="removeTask(task.id)" /></ul></div>
</template><script setup>
import { ref } from 'vue'
import { useLocalStorage, useToggle } from '@vueuse/core'
import TodoItem from './components/TodoItem.vue'const newTask = ref('')
// 完成这部分代码，使用 useLocalStorage 来存储任务列表
const tasks = useLocalStorage('tasks', [])const addTask = () => {// 完成这部分代码，使用 useToggle 来切换任务的状态if (newTask.value.trim() === '') return// isCompleted 是初始状态// toggleCompleted 是切换状态的方法// 后面传递的 false 是初始状态const [isCompleted, toggleCompleted] = useToggle(false)tasks.value.push({id: Date.now(),text: newTask.value,completed: isCompleted,toggleCompleted})newTask.value = ''
}const removeTask = (id) => {tasks.value = tasks.value.filter((task) => task.id !== id)
}
</script><style scoped>
.container {max-width: 600px;margin: 0 auto;padding: 20px;font-family: Arial, sans-serif;text-align: center;
}
.input-container {display: flex;justify-content: center;margin-bottom: 20px;
}
input {width: 70%;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;margin-right: 20px;
}
button {width: 100px;padding: 10px 20px;font-size: 16px;border: none;background-color: #42b983;color: white;border-radius: 4px;cursor: pointer;
}
button:hover {background-color: #369870;
}
ul {list-style: none;padding: 0;
}
</style>

4. 总结

其实 VueUse 就是一个 组合式API 的工具库，减少了我们的工作量。

对于初学者而言，不必又太多的心理负担。平时多看看 核心函数的 API 介绍和用例，想的到就用一下，减少下代码量，提高下效率。没想到，就不用，无伤大雅。

---

上一章 《Vue3 高级性能优化》