Vue.js 2.0 是目前最流行的前端框架之一，它采用了响应式数据绑定和组件化的开发方式，让前端开发变得更加简单、高效和可维护。在 Vue.js 中，computed 属性是非常常用的特性，它允许我们定义计算属性，通过对其他属性进行计算得到一个新的值。但是，有时我们需要在 computed 中使用异步操作，例如从服务器获取数据，这时就需要使用 async/await 来实现。
1. computed 与异步操作
computed 属性允许我们定义一个函数，函数体内可以通过访问 data 中的属性进行计算，最终得到一个值。例如，我们可以这样定义一个计算属性：
-- -------------------- ---- -------
--- -- - --- -----
----- -
-- ---
-- --
--
--------- -
---- -------- -- -
------ ------ - ------
-
-
--在这个例子中，computed 属性 sum 的值为 30，它等于 data 中的属性 x 和 y 的和。computed 属性的特点是，只有当计算属性所依赖的属性发生改变时，它才会重新计算，并把计算结果缓存起来。这样，如果多个组件使用同一个计算属性，它们都会获取到相同的计算结果，避免了重复计算的开销。
但是，在实际开发中，我们经常需要进行异步操作，例如从服务器获取数据，这时就不能使用同步的方式计算属性的值。如果我们这样定义一个计算属性：
computed: {
data: function () {
return fetchDataFromServer() // 此处未定义
}
}由于 fetchDataFromServer 函数是异步的，computed 属性 data 并不会等待该函数执行完成后再计算它的值，而是直接返回一个 Promise 对象。这时，如果我们在模板中使用该属性，就会出现一些意料之外的错误：
<div>{{ data }}</div>由于 computed 属性 data 返回的是 Promise 对象，而在模板中不能直接显示 Promise 对象，所以页面会显示 [object Promise]。虽然我们可以使用 Promise 的 then 方法来处理返回的数据，但是在大型应用中，这样的代码会变得非常冗长和难以维护。
2. 使用 async/await
为了解决上述的问题，我们可以使用 JavaScript 中的 async/await 特性。async/await 是 ECMAScript 2017 中引入的新特性，它让异步操作的代码看起来像是同步的，更加简洁和易于理解。在 Vue.js 中，我们可以在 computed 函数体前面加上 async 关键字，把异步操作放到 await 表达式中，从而实现异步计算属性的功能。
下面是一个示例代码，它使用 axios 库从服务器获取数据，并把获取到的数据保存在 computed 属性 data 中：
-- -------------------- ---- -------
--- -- - --- -----
----- -
---- ------------------------------
--
--------- -
----- ---- -- -
--- -
----- -------- - ----- -------------------
------ -------------
- ----- ------- -
--------------------
-
-
-
--在这个例子中，computed 属性 data 被定义为一个异步函数，并使用 async/await 关键字来实现异步操作。当服务器返回数据时，await 表达式会把数据解析为 JavaScript 对象，并返回给计算属性 data。如果发生错误，try...catch 语句会捕获错误并输出到控制台。
在模板中使用这个计算属性跟使用同步计算属性是一样的：
<div>{{ data }}</div>由于使用了 async/await 特性，代码看起来更加简洁和易于理解，而且可以处理异步错误，避免了意料之外的异常。
3. 注意事项
虽然使用 async/await 可以让我们在 computed 中实现异步操作，但是需要注意一些细节。下面是一些需要注意的地方：
- 使用 async/await 的 computed 属性必须返回一个 Promise 对象。这是因为 async 函数内部会自动封装成一个 Promise 对象，如果不返回 Promise 对象，就无法获得计算属性的值。
- 如果 async 函数内部发生错误，必须使用 try...catch 语句来处理错误。否则，错误会被抛到全局作用域，导致应用崩溃。
- 在组件销毁时，必须手动取消异步操作，否则会导致内存泄漏。通常可以使用 axios 库提供的 cancelToken 取消异步操作。
4. 总结
在 Vue.js 2.0 中，使用 async/await 特性可以让我们在 computed 属性中使用异步操作，从而更加灵活和高效地处理数据。虽然需要注意一些细节，但是使用 async/await 可以让异步代码看起来更加简洁和易于理解，减少错误和异常。在实际开发中，我们建议使用 async/await 来处理异步操作，让代码更加优雅和健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bf01c48841e9894a39b37