Vue--》深入了解 VueUse 功能性工具集

VueUse 是一个针对 Vue 2 和 Vue 3 提供的实用函数集合。它提供了许多可以用于开发 Vue 应用程序的有用的、可复用的函数。

以下是如何使用 VueUse 中的 useCounter 函数来创建一个计数器的简单示例：

首先，确保安装 VueUse：

npm install @vueuse/core

然后在你的 Vue 组件中使用它：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
 
<script>
import { useCounter } from '@vueuse/core';
 
export default {
  setup() {
    // 使用 useCounter 创建计数器
    const { count, increment, decrement } = useCounter();
 
    // 返回响应式的数据和方法，供模板使用
    return {
      count,
      increment,
      decrement
    };
  }
};
</script>

在这个例子中，我们导入了 useCounter 函数，并在 setup 函数中调用它。useCounter 返回一个响应式的计数器 count，以及用于增加和减少计数的函数 increment 和 decrement。这些都是在组件的模板中使用的响应式数据和方法。