🚀 Vue 中使用 `@vueuse/core` 终极指南：从入门到精通

@vueuse/core 是 Vue 生态中最强大的 Composition API 工具库 ，提供 100+ 响应式工具函数 ，能让你像开挂一样高效开发。本文将详细介绍 如何安装、按需引入、常用函数使用场景 ，并提供 完整代码示例。

---

1. 安装：1 分钟快速上手

📦 使用 npm/yarn/pnpm 安装

bash
	# npm

	npm install @vueuse/core

	 

	# yarn

	yarn add @vueuse/core

	 

	# pnpm

	pnpm add @vueuse/core

🌐 CDN 方式（适用于快速原型开发）

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

---

2. 引入方式：按需 vs 全量

✅ 推荐：按需引入（Tree-shaking 优化）

javascript
	// 按需引入单个函数

	import { useStorage, useDebounceFn } from '@vueuse/core';

	 

	// 或者使用解构导入多个

	import {

	  useWindowSize,

	  useFetch,

	  useElementVisibility

	} from '@vueuse/core';

❌ 不推荐：全量引入（会增加打包体积）

javascript
	// 不推荐（除非你知道自己在做什么）

	import * as VueUse from '@vueuse/core';

---

3. 核心功能分类详解

🔋 状态管理：让数据自动持久化

📌 useStorage - 响应式 localStorage

javascript
	import { useStorage } from '@vueuse/core';

	 

	// 自动同步到 localStorage，刷新不丢失

	const username = useStorage('username', '默认值');

	 

	// 修改值会自动存储

	username.value = '张三';

📌 useSessionStorage - 响应式 sessionStorage

javascript
	const tempData = useSessionStorage('temp', { key: 'value' });

📱 DOM 操作：像透视挂一样监控元素

📌 useElementSize - 实时获取元素尺寸

vue
	<template>

	  <div ref="box">调整浏览器窗口大小</div>

	  <p>宽度：{{ width }}px</p>

	  <p>高度：{{ height }}px</p>

	</template>

	 

	<script setup>

	import { ref } from 'vue';

	import { useElementSize } from '@vueuse/core';

	 

	const box = ref(null);

	const { width, height } = useElementSize(box);

	</script>

📌 useScroll - 监听滚动位置

javascript
	const { x, y } = useScroll(window); // 监听窗口滚动

	 

	// 监听垂直滚动到底部

	if (y.value + window.innerHeight > document.body.scrollHeight - 50) {

	  console.log('接近底部，加载更多数据');

	}

🌐 网络请求：比 axios 更简单

📌 useFetch - 响应式 HTTP 请求

javascript
	const { data, error, isFinished } = useFetch('https://api.example.com/data');

	 

	// 响应式数据

	if (data.value) {

	  console.log('获取到的数据:', data.value);

	}

📌 useWebSocket - WebSocket 封装

javascript
	const { send, data } = useWebSocket('wss://echo.websocket.org');

	 

	send('Hello WebSocket!'); // 发送消息

	data.value; // 接收消息

⏱️ 性能优化：防抖节流必备

📌 useDebounceFn - 防抖函数

javascript
	import { useDebounceFn } from '@vueuse/core';

	 

	const search = useDebounceFn(() => {

	  console.log('防抖搜索:', new Date().toLocaleTimeString());

	}, 500); // 500ms 内只执行一次

	 

	// 调用方式

	search();

📌 useThrottleFn - 节流函数

javascript
	const scrollHandler = useThrottleFn(() => {

	  console.log('节流滚动:', new Date().toLocaleTimeString());

	}, 200); // 每200ms最多执行一次

	 

	window.addEventListener('scroll', scrollHandler);

🎨 动画与过渡：丝滑体验

📌 useTransition - 数值平滑过渡

javascript
	import { ref, watch } from 'vue';

	import { useTransition } from '@vueuse/core';

	 

	const isVisible = ref(false);

	const transitionedValue = useTransition(isVisible, {

	  duration: 1000, // 过渡时间1秒

	  transition: [0.4, 0, 0.2, 1] // cubic-bezier 曲线

	});

	 

	// 切换时会有平滑动画

	watch(isVisible, (val) => {

	  console.log('当前值:', transitionedValue.value);

	});

📍 设备传感器：让应用感知世界

📌 useGeolocation - 获取地理位置

javascript
	const { coords, error } = useGeolocation();

	 

	if (coords.value) {

	  console.log('纬度:', coords.value.latitude);

	  console.log('经度:', coords.value.longitude);

	}

📌 useDeviceMotion - 监听设备加速度

javascript
	const { x, y, z } = useDeviceMotion();

	 

	// 实时获取设备加速度数据

	setInterval(() => {

	  console.log(`X: ${x.value}, Y: ${y.value}, Z: ${z.value}`);

	}, 1000);

---

4. 高级技巧：组合使用更强大

🔥 技巧1：防抖 + 搜索功能

javascript
	import { ref } from 'vue';

	import { useDebounceFn } from '@vueuse/core';

	 

	const searchQuery = ref('');

	const debouncedSearch = useDebounceFn(() => {

	  console.log('实际搜索:', searchQuery.value);

	  // 这里可以调用API

	}, 500);

	 

	// 在模板中绑定输入事件

	// <input v-model="searchQuery" @input="debouncedSearch" />

🔥 技巧2：监听元素可见性 + 懒加载

vue
	<template>

	  <img 

	    v-for="img in images" 

	    :key="img.id"

	    :src="isVisible[img.id] ? img.url : ''"

	    ref="imgRefs"

	  />

	</template>

	 

	<script setup>

	import { ref, onMounted } from 'vue';

	import { useElementVisibility } from '@vueuse/core';

	 

	const images = [

	  { id: 1, url: 'image1.jpg' },

	  { id: 2, url: 'image2.jpg' },

	  // 更多图片...

	];

	 

	const imgRefs = ref([]);

	const isVisible = ref({});

	 

	onMounted(() => {

	  imgRefs.value.forEach((el, index) => {

	    if (el) {

	      const { isVisible: vis } = useElementVisibility(el);

	      isVisible.value[images[index].id] = vis;

	    }

	  });

	});

	</script>

---

5. 常见问题解答

❓ Q1: 和 Lodash 的区别是什么？

• @vueuse/core 是 响应式的，专门为 Vue 设计
• Lodash 是 通用工具库，不涉及响应式
• 在 Vue 项目中，优先使用 @vueuse/core 处理响应式逻辑

❓ Q2: 如何调试工具函数？

• 使用 Vue Devtools 检查响应式状态
• 在函数内部添加 console.log
• 使用 watch 监听变化

❓ Q3: 兼容性如何？

• 支持 Vue 2.7+ 和 Vue 3
• 需要浏览器支持 Proxy（现代浏览器均支持）

---

6. 总结：为什么你应该使用 @vueuse/core？

特性	说明
🚀 高效	减少重复代码，提升开发速度
🔋 全面	覆盖 90% 的日常开发需求
🌳 Tree-shaking	按需引入，打包体积小
💪 响应式	所有工具函数都是响应式的
📱 跨平台	支持 Web、SSR、Electron 等

🎯 最佳实践建议：

1. 新项目直接集成 @vueuse/core
2. 旧项目逐步迁移常用功能
3. 优先使用按需引入方式

---

📌 最终行动号召

"不要再重复造轮子了！立即安装 @vueuse/core，让你的 Vue 开发效率提升 300%！"

🔥 安装命令：

bash
	npm install @vueuse/core

👉 关注我，获取更多 Vue 高级技巧！ 🚀