VueUse

这是 Vue 的一个第三方库，提供了许多意想不到的功能。比如异步 computed 。

computedAsync

Vue 官方的 computed 是同步的，有时并不能满足开发需求。比如我根据“县名”异步查询行政区下的“乡镇”，在 resolve 之前，我希望有个默认值。当然了，我可以定义一个 ref 变量来存放默认值，异步查询后更改 ref 的值。这意味着，我要在选择县之后的回调函数中，手动调用异步函数，然后等待异步函数 resolve ，再修改 ref 的值。这显然很麻烦。

但是这个库函数，直接传入异步函数和默认值，组件直接使用 computed 的结果即可，自然是方便很多。

比如。

1
2
3
4
5
6
7
8
9
10
11
const towns = computedAsync(
    async () => {
        if (country.value) {
            let towns = await getTowns((country.value as any).name);
            return addIdToDistinct(towns as any);
        }
        return [{ id: 0, name: '' }];
    },
    [{ id: 0, name: '' }],
    { lazy: true }
)