ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端逐日一练：为什么 computed 不支持异步？computed 的机制和缓存 [打印本页]

作者: 用户云卷云舒 时间: 2024-9-28 12:04
标题: 前端逐日一练：为什么 computed 不支持异步？computed 的机制和缓存
在 Vue.js 中，盘算属性（computed）具有缓存机制，这意味着盘算属性的值在盘算后会被缓存起来，以便在未来的访问中直接返回缓存的结果，而不需要重新盘算。
1. 盘算属性的机制：

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

2. 缓存的内容：

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

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

为什么 computed 不支持异步？

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

computed: {
asyncValue() {
// 有效
return this.a + this.b;
},
asyncValueWithPromise() {
// 无效
const res = await new Promise(resolve => {
setTimeout(() => {
resolve(this.a + this.b);
});
});
console.log(res); // 输出计算结果
return res;
}
}

复制代码

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

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)