记录Vue3 defineExpose在异步setup函数中使用时的问题与解决方案

#记录Vue3 defineExpose在异步setup函数中使用时的问题与解决方案| 来源: 网络整理| 查看: 265

背景

在Vue3日常开发中，defineExpose和异步setup函数都是比较常用的特性。但目前这两个特性结合可能会给你的项目带来一些坑点。下面简单记录下本人在项目中实际遇到的问题, 并给出解决方案。

问题及原因

在项目中，遇到的问题是父组件在template通过ref获取子组件实例得到的对象并不是defineExpose方法暴露的结构。

根据上面的问题, 实现了一个可以复现的代码片段。

// app.vue import { ref } from 'vue' import child from './child.vue' const childRef = ref() const clickEvent = () => { // 期望输出‘hello’ console.log(childRef.value?.msg) } say hello // child.vue import {ref} from 'vue'; const msg = ref('hello'); // 开启后再观察下child.value.msg的结果，会发现是undefined //await setTimeout(() => { // console.log('wait 1s') //}, 1000) defineExpose({ msg }); i am child

正常情况下，点击按钮会在Console中看到‘hello’, 但是当子组件setup中的setTimeout函数的注释去掉后，会看到输出的是undefined。

为什么会出现这个问题？其实是Child.vue在Setup的异步函数阻塞了defineExpose，导致在App.vue的template中获取Child组件的引用时instance.exposed并没有初始化，这时获取到的引用是Child组件实例而不是定义的expose结构。

解决方案

知道上述问题的原因，解决办法就很简单。就是注意把defineExpose函数调用提前到所有异步函数之前。

另外，有些情况下我们仍然需要依赖异步函数返回的数据进行expose，只能将变量先声明等到函数完成时在赋值。这个问题在github上也可以看到对应的issue, 截止目前官方对异步场景还没有支持，开发者也只能通过这个方案解决了。

最后，如果在文章中有出错的地方，欢迎大家指出。

【本文地址】

公司简介

联系我们