介绍
计算属性 在 Vue 中,您可以执行复杂的操作或数据格式化,同时使用依赖计算来最大限度地提高性能,这些计算仅在依赖变更时更新视图。
但是,Vue-async-computed 包允许您在组件中创建和消耗非同步计算属性,通过将一个承诺的解决值绑定到组件属性。
前提条件
要完成本教程,您将需要:
- Node.js 是本地安装的,您可以按照 如何安装 Node.js 和创建本地开发环境进行操作。 *某些熟悉 设置 Vue.js 项目和 使用 Vue.js 组件可能是有益的。
本教程已通过 Node v15.10.0、npm v7.6.0、vue v2.6.11 和vue async-computed v3.9.0 进行验证。
创建项目
要快速设置项目,本文将建议使用 @vue/cli。
<$>[注]
**注:**本文将采用使用npx的方法,以避免全球安装@vue/cli;
<$>
1npx @vue/cli create vue-async-computed-example --default
导航到新创建的项目目录;
1cd vue-async-computed-example
vue-async-computed可以通过npm安装,使用以下命令:
1npm install [email protected]
然后,用代码编辑器打开main.js文件,导入并使用vue-async-computed:
1[label src/main.js]
2import Vue from 'vue'
3import AsyncComputed from 'vue-async-computed'
4import App from './App.vue'
5
6Vue.config.productionTip = false
7
8Vue.use(AsyncComputed)
9
10new Vue({
11 render: h => h(App),
12}).$mount('#app')
在此时,您将有一个新的Vue项目,它支持vue-async-computed。
使用asyncComputed
标准计算属性和asyncComputed属性之间存在一些差异:
asyncComputed属性不能有设置器.- 直到 'Promise' 解决,除非设置了 'default' 选项,否则值为 'null'。
在大多数情况下,您可以简单地将它们视为返回承诺的计算属性。
以下是使用asyncComputed的样本组件:
1[label src/components/MyComponent.vue]
2<template>
3 <div>
4 <h2>Asynchronous Property</h2>
5 <p>{{myResolvedValue}}</p>
6 </div>
7</template>
8
9<script>
10/* eslint-disable no-unused-vars */
11
12export default {
13 asyncComputed: {
14 myResolvedValue() {
15 return new Promise((resolve, reject) => {
16 setTimeout(() => resolve('Changed Value!'), 1000)
17 })
18 }
19 }
20}
21</script>
<$>[警告]
警告: 根据你的eslint规则,你可能会遇到一个关于拒绝被定义但从未使用的警告。
这可以用ES7 / ES2016async / wait重写:
1[label src/components/MyComponent.vue]
2<template>
3 <div>
4 <h2>Asynchronous Property</h2>
5 <p>{{myResolvedValue}}</p>
6 </div>
7</template>
8
9<script>
10/* eslint-disable no-unused-vars */
11
12function asyncChange() {
13 return new Promise((resolve, reject) => {
14 setTimeout(() => resolve('Changed Value!'), 1000)
15 })
16}
17
18export default {
19 asyncComputed: {
20 async myResolvedValue() {
21 return await asyncChange()
22 }
23 }
24}
25</script>
将您的更改保存到此文件中。
Thne,用您的代码编辑器打开App.vue文件. 更改此文件以使用您的新组件:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <MyComponent/>
5 </div>
6</template>
7
8<script>
9import MyComponent from './components/MyComponent.vue'
10
11export default {
12 name: 'App',
13 components: {
14 MyComponent
15 }
16}
17</script>
接下来,运行应用程序:
1npm run serve
请在您的 Web 浏览器中观察应用程序,最初不会有默认消息,过了 1 秒后会出现更改值!消息。
如果您希望默认值是其他东西,则可以使用具有get()函数和default:val,default:Function属性的对象。
以下是使用默认值的示例组件:
1[label src/components/MyComponent.vue]
2<template>
3 <div>
4 <h2>Asynchronous Property</h2>
5 <p>{{myResolvedValue}}</p>
6 </div>
7</template>
8
9<script>
10/* eslint-disable no-unused-vars */
11
12export default {
13 asyncComputed: {
14 myResolvedValue: {
15 get() {
16 return new Promise((resolve, reject) => {
17 setTimeout(() => resolve('Changed Value!'), 1000)
18 })
19 },
20 default: 'No Changes!'
21 }
22 }
23}
24</script>
将您的更改保存到此文件中。
接下来,运行应用程序:
1npm run serve
请在您的 Web 浏览器中观察应用程序。默认消息没有更改将最初出现。经过 1 秒后,将出现更改值!消息。
结论
在本文中,您将vue-async-computed应用到 Vue 项目中,以使用asyncComputed。
此套件的一些优点和缺点,以及为什么此功能在Vue核心默认情况下不可用的原因的决定是 在这个GitHub问题中捕捉到的。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。