不能对setup函数直接使用async

才由vue2转入vue3，我们可能会这样调用封装好的axios请求：

import { findBrand } from '@/api'

setup(){
    const resFindBrand = findBrand()
}

由于axios请求的返回值一般是一个Promise对象，所以使用await接收，既然使用了await，那么就要调用async，思来想去，async只能放到setup()前面，如下所示：

import { findBrand } from '@/api'

async setup(){
    const resFindBrand = await findBrand()
}

本应该是皆大欢喜的，但是打开浏览器发现，使用数据的组件并没有渲染。且调试工具爆出一个警告：

意思就是setup并不能直接添加async。我们修改写法：

import { findBrand } from '@/api'

setup(){
    findBrand().then(data => {
          brand.brands = data.result
    })
}

问题就是出现在，setup函数是一个同步函数，且本身就是一个代表beforeCreat()和created()的生命周期函数，那么就保证组件要等到setup函数执行完毕才开始创建渲染。一旦在setup函数前面加上async，那么setup就会变成一个异步函数，与函数本身的设计理念相悖。虽然有一些操作可以实现在setup前面加async且不影响最终的效果，但这是不推荐的。