Vue Academy · 课时

VueUse：组合式函数库

useLocalStorage、useMouse、useWindowSize、useIntersectionObserver——实用的 VueUse

第 4 / 4 课13 个步骤

VueUse：组合式函数库 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 VueUse

VueUse（@vueuse/core）是一大套为常见任务准备的现成组合式函数，涵盖存储、传感器、浏览器 API 等。它可以避免您重复实现这些功能。

npm install @vueuse/core

使用 useLocalStorage 实现持久化

useLocalStorage 返回一个与 localStorage 同步的引用。更改会自动在重新加载后保留，序列化也由它为您处理。

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

响应式与持久化

返回的引用与其他引用一样，可以通过 v-model 绑定；但由于 VueUse 会将数据写入存储，它的值会在页面刷新后保留。

<input v-model="name" />

使用 useMouse 获取光标位置

useMouse 会跟踪指针，并返回响应式的 x 和 y 引用，在光标移动时更新。

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

显示鼠标坐标

在模板中绑定这些引用；它们会在每次鼠标移动时更新，无需您手动连接监听器。

<p>Cursor: {{ x }}, {{ y }}</p>

使用 useWindowSize 获取尺寸

useWindowSize 提供响应式的 width 和 height 引用，并在调整大小时更新，非常适合在脚本中实现响应式逻辑。

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

响应式逻辑

将窗口大小与计算属性结合起来，以响应式地驱动布局决策。

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

使用 useIntersectionObserver 实现懒加载

useIntersectionObserver 会告诉您某个元素何时进入视口，这是实现图片懒加载或无限滚动的基础。

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

在可见时触发

传入一个模板引用和一个会接收交叉项的回调。当目标可见时加载图片或获取更多数据。

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

自动清理

一个很大的优点是：VueUse 组合式函数会在卸载时注册并移除自己的监听器和观察器。您无需额外操作就能获得正确的清理效果。

为什么使用 VueUse

它支持树摇、经过充分测试，并以 TypeScript 为先。对于存储、传感器、网络、时间等常见需求，请优先考虑 VueUse，而不是自己编写组合式函数。

快速检查

哪个 VueUse 组合式函数会将引用持久化到 localStorage？

在交互式课程中回答

回顾

您了解了 VueUse：useLocalStorage（持久化状态）、useMouse（光标位置）、useWindowSize（响应式尺寸）以及 useIntersectionObserver（懒加载触发器），它们都支持自动清理和树摇。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「VueUse：组合式函数库」课时是免费的吗？

是的 — 「VueUse：组合式函数库」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「VueUse：组合式函数库」这节课中我会学到什么？

useLocalStorage、useMouse、useWindowSize、useIntersectionObserver——实用的 VueUse 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「VueUse：组合式函数库」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy