前端逐日一练：为什么 computed 不支持异步？computed 的机制和缓存 ...

在 Vue.js 中，盘算属性（computed）具有缓存机制，这意味着盘算属性的值在盘算后会被缓存起来，以便在未来的访问中直接返回缓存的结果，而不需要重新盘算。
1. 盘算属性的机制：

• 盘算属性的值是根据其所依赖的响应式数据动态盘算得出的。
  
• 当盘算属性所依赖的响应式数据发生变化时，盘算属性会自动重新盘算其值。
  
• 盘算属性的值会被缓存起来，当再次访问类似的盘算属性时，直接返回缓存的结果，而不会重新盘算。
  

2. 缓存的内容：

盘算属性的缓存机制紧张是针对盘算属性的值举行的，详细包罗：

• 盘算属性的终极结果值。
  
• 盘算属性所依赖的响应式数据的值。
  
• 盘算属性的盘算逻辑。
  

为什么 computed 不支持异步？

Computed 属性是基于依赖值的同步盘算的，这是由于 computed 的定义决定了它必须是同步的。Computed 属性的定义是“依赖值改变，computed 值就会改变”，因此 computed 必须同步地响应其依赖值的变化，以确保盘算属性的稳固性和可预测性。
假如 computed 支持异步，就可能出现“依赖值改变但 computed 值未改变”的情况，这会违背 computed 的定义。因此，为了包管盘算属性的活动符合其定义，Vue.js 决定不支持异步的 computed。
虽然 computed 不支持异步，但在某些情况下，你可以在 computed 中使用异步操作，但需要将异步操作的结果放在别的的属性中，而不是直接返回。由于 computed 属性的返回值必须是同步的。

1. computed: {
2.   asyncValue() {
3.     // 有效
4.     return this.a + this.b;
5.   },
6.   asyncValueWithPromise() {
7.     // 无效
8.     const res = await new Promise(resolve => {
9.       setTimeout(() => {
10.         resolve(this.a + this.b);
11.       });
12.     });
13.     console.log(res); // 输出计算结果
14.     return res;
15.   }
16. }

复制代码

综上所述，computed 的缓存机制使得其具有高效的性能表现，而不支持异步操作是为了包管其稳固性和可预测性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。