分类 VUE3 下的文章

/**
 * 异步Computed
 * @param compute 异步计算函数
 * @param initValue 初始值
 * @returns Ref 一个只读的异步计算Ref
 */
export function asyncComputed(compute,initValue){
    const value = shallowRef(initValue);
    watchEffect(async ()=>{
        console.log('trigger update')
        value.value = await compute();
    })
    return readonly(value);
}
const asyncValue = asyncComputed(()=>{
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(1)
        },2000})
})

//输出undefined
console.log(asyncValue.value);
//2秒后变成1

 

在vue3 async setup中 expose 和一些生命周期钩子的注册需要在第一个await 之前,但是也有在await之后调用的方法。

示例如下:

async setup(props,{expose}){
	const instance = getCurrentInstance();
	const exposeObj = {};
	//先把这个空对象expose出去
	expose(exposeObj);
	//模拟异步操作
	const result = await new Promise((resolve)=>{
		setTimeout(()=>resolve(2),2000);
	});
	//注册生命周期钩子时,第二个参数传入instance
	onMounted(()=>{
			console.log('我挂载啦!')
	},instance)

	onUnmounted(()=>{
		console.log('我卸载啦!')
	},instance)
	//后续再添加expose的属性和方法
	exposeObj.attr = result ;
	exposeObj.func = function(){
		console.log('some exposed function.',result)
	}
	
}