【vueUse库Reactivity模块各函数简介及使用方法--上篇】

vueUse库是一个专门为Vue打造的工具库，提供了丰富的功能，包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数，以下是这些函数的简介和使用方法：

vueUse

Reactivity

函数

1. computedAsync

computedAsync简介及使用方法

vueUse 是一个基于 Vue 3 Composition API 的实用函数库，它提供了一系列可复用的 Composition API 函数，旨在帮助开发者更高效地构建 Vue 应用。其中，Reactivity 模块提供了一系列与响应式数据相关的函数，而 computedAsync 函数则是这个模块中用于处理异步计算的一个非常有用的工具。

computedAsync 函数概述

computedAsync 函数允许你创建一个异步的计算属性。在 Vue 3 中，传统的 computed 函数是同步的，这意味着它只能依赖于同步的响应式数据来生成新的值。然而，在实际开发中，我们经常需要基于异步操作（如 API 请求）的结果来更新组件的状态。computedAsync 正是为了解决这个需求而设计的。

使用方法

computedAsync 函数接受一个返回 Promise 的异步函数作为参数，并返回一个响应式的 ref 对象，该对象包含两个属性：value 和 loading。value 属性存储异步操作的结果，而 loading 属性则是一个布尔值，表示异步操作是否正在进行中。

下面是一个使用 computedAsync 的基本示例：

import {
    ref, onMounted } from 'vue';
import {
    computedAsync } from '@vueuse/core';

export default {
   
  setup() {
   
    // 假设我们有一个用于存储用户数据的响应式 ref
    const userId = ref('123');

    // 使用 computedAsync 创建一个异步计算属性
    // 这里我们模拟一个异步的 API 请求来获取用户信息
    const userInfo = computedAsync(async () => {
   
      // 假设 fetchUser 是一个返回 Promise 的函数，用于获取用户信息
      // 这里用 setTimeout 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      return {
    name: 'Alice', age: 30 };
    }, {
   
      // 可选配置项，可以在这里设置初始值、错误处理等
      initialValue: null,
      onError(error) {
   
        console.error('Failed to fetch user info:', error);
      },
    });

    // 在组件挂载后，可以触发一些操作，比如根据 userId 更新用户信息
    onMounted(() => {
   
      // 注意：这里只是为了演示，实际上 userInfo 是自动更新的
      // 在实际应用中，你可能需要根据 userId 的变化来触发更新
    });

    // 返回给模板的响应式数据
    return {
   
      userId,
      userInfo,
    };
  },
};

在模板中，你可以这样使用 userInfo：

<template>
  <div>
    <p v-if="userInfo.loading">Loading user info...</p>
    <p v-else-if="userInfo.value">
      User Name: {
  { userInfo.value.name }}, Age: {
  { userInfo.value.age }}
    </p>
    <p v-else>No user info available.</p>
  </div>
</template>

注意事项

• computedAsync 返回的 ref 对象包含 value 和 loading 两个属性，分别用于存储异步操作的结果