Vue 3 组合 API,未定义变量,生命周期
Posted
技术标签:
【中文标题】Vue 3 组合 API,未定义变量,生命周期【英文标题】:Vue 3 composition API, undefined variable, lifecycle 【发布时间】:2022-01-06 06:01:20 【问题描述】:我对 Vue.js 很陌生,在开发我的第一个项目时,我偶然发现了一个我认为与组件生命周期有关的问题。
上下文如下: 我正在使用带有组合 API 的 Vue 3。
我有一个“地图”组件,我在其中使用 d3.js 显示图表。 在我的 Setup() 方法中,我有 onBeforeMount() 和 onMounted()。 在 onBeforeMount() 方法中,我想将 Firestore 数据库中的数据用于图表中的值。第 47 行的 console.log 正确显示了数据。 在 onMounted() 中,我打算放置我的 d3 图表。但是当我尝试访问第 55 行的 console.log 中的数据时,我得到了 undefined...
理想情况下,从“地图”组件中,我想从我的数据库中获取数据并使用它来创建图表,然后让组件呈现图表。 然后我将拥有另一个名为“MapSettings”的组件,它将能够更改“Map”中的数据,例如过滤器等......并在图表中自动更新值。 最后,两个组件都将是兄弟组件,并且具有相同的父组件。所以“地图”和“地图设置”在同一层次。
但首先我需要了解为什么我会变得不确定。任何帮助或建议将不胜感激!
【问题讨论】:
请不要将代码发布为图片,meta.***.com/questions/285551/…。无法复制或搜索。 【参考方案1】:您的生命周期挂钩看起来不错。您面临的问题与异步执行的代码和同步执行的代码有关。
您正在声明一个使用异步等待功能的函数。该函数将异步执行。在这种情况下,您从 Firestore 获取数据并将其存储在 ref onBeforeMount()
。
另一方面,您在onMounted()
声明一个普通函数,试图访问一个引用的值,这将导致undefined
,因为您在onBeforeMount()
定义的函数调用 onMounted
时没有完成它的执行(或者它在事件队列中)。
这就是为什么您首先看到来自onMounted
的console.log
。
一种解决方案是将两个函数合并到一个生命周期钩子中并使用 async await:
setup()
const actorDocs, load = getActorDocs()
const actorsData = red([])
// load actor data from db
onBeforeMount( async () =>
await load()
actorsData.value = actorDocs
console.log(actorsData.value)
// manipulate it here...
)
请记住,您不能 暂停 使用 async-await 生命周期挂钩。您要暂停的是 Vue 将在该钩子中执行的函数。确实,这非常好,因为暂停钩子根本没有效率。
【讨论】:
以上是关于Vue 3 组合 API,未定义变量,生命周期的主要内容,如果未能解决你的问题,请参考以下文章