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 时没有完成它的执行(或者它在事件队列中)。

这就是为什么您首先看到来自onMountedconsole.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,未定义变量,生命周期的主要内容,如果未能解决你的问题,请参考以下文章

Vue3 生命周期钩子函数

vue3的生命周期

重磅知识,Vue3.0 生命周期(变化不止一点)

重磅知识,Vue3.0 生命周期(变化不止一点)

重磅知识,Vue3.0 生命周期(变化不止一点)

了解 Vue 生命周期钩子