介绍

Vue 中的计算属性允许您执行复杂的操作或数据格式化，同时通过依赖项计算最大限度地提高性能，该计算仅在依赖项更改时更新视图。此功能是同步的。

但是，该vue-async-computed包允许您通过将 a 的解析值绑定Promise到组件属性来创建和使用组件中的异步计算属性。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。
• 有些熟悉Promise，async和await。

本教程已通过 Node v15.10.0、npmv7.6.0、vuev2.6.11 和vue-async-computedv3.9.0 验证。

设置项目

为了快速设置项目，本文将推荐使用@vue/cli.

注意：本文将采取使用的方式npx来避免全局安装@vue/cli；

npx @vue/cli create vue-async-computed-example  --default

导航到新创建的项目目录；

cd vue-async-computed-example

vue-async-computed可以通过npm以下命令安装：

npm install vue-async-computed@3.9.0

然后，main.js使用您的代码编辑器打开该文件。导入和使用vue-async-computed：

import Vue from 'vue'
import AsyncComputed from 'vue-async-computed'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(AsyncComputed)

new Vue({
  render: h => h(App),
}).$mount('#app')

此时，您将拥有一个支持vue-async-computed.

使用 asyncComputed

标准computed属性和asyncComputed属性之间有一些区别：

• asyncComputed 属性不能有 setter。
• 在Promise解决之前，null除非default设置了该选项，否则值为。

在大多数情况下，您可以将它们视为返回 a 的计算属性Promise。

这是一个示例组件，它使用asyncComputed：

<template>
  <div>
    <h2>Asynchronous Property</h2>
    <p>{{myResolvedValue}}</p>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

export default {
  asyncComputed: {
    myResolvedValue() {
      return new Promise((resolve, reject) => {
        setTimeout(() => resolve('Changed Value!'), 1000)
      })
    }
  }
}
</script>

警告：根据您的eslint规则，您可能会遇到有关reject已定义但从未使用的警告。对于本教程的目的，您可以解决此问题通过禁用这条规则：/* eslint-disable no-unused-vars */。

这可以用 ES7 / ES2016 重写async / await：

<template>
  <div>
    <h2>Asynchronous Property</h2>
    <p>{{myResolvedValue}}</p>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

function asyncChange() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Changed Value!'), 1000)
  })
}

export default {
  asyncComputed: {
    async myResolvedValue() {
      return await asyncChange()
    }
  }
}
</script>

保存对此文件所做的更改。

然后，App.vue使用您的代码编辑器打开该文件。修改此文件以使用您的新组件：

<template>
  <div id="app">
    <MyComponent/>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

接下来，运行应用程序：

npm run serve

在 Web 浏览器中观察应用程序。default最初不会有任何消息。1 秒后，"Changed Value!"将出现该消息。

在Promise解析之前，默认值为null。如果您希望默认值是其他值，您可以使用带有get()函数和default: val | default: Function属性的对象。

这是一个使用default值的示例组件：

<template>
  <div>
    <h2>Asynchronous Property</h2>
    <p>{{myResolvedValue}}</p>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

export default {
  asyncComputed: {
    myResolvedValue: {
      get() {
        return new Promise((resolve, reject) => {
          setTimeout(() => resolve('Changed Value!'), 1000)
        })
      },
      default: 'No Changes!'
    }
  }
}
</script>

保存对此文件所做的更改。

接下来，运行应用程序：

npm run serve

在 Web 浏览器中观察应用程序。该default消息"No Changes"最初会出现。1 秒后，"Changed Value!"将出现该消息。

结论

在本文中，您申请vue-async-computed了一个 Vue 项目以利用asyncComputed.

这个包的一些优点和缺点以及为什么这个功能在 Vue 核心中默认不可用的决定都在这个 GitHub 问题中捕获。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。