Vue 3 组合 API，未定义变量，生命周期

Question

我对 Vue.js 很陌生，在开发我的第一个项目时，我偶然发现了一个我认为与组件生命周期有关的问题。

上下文如下： 我正在使用带有组合 API 的 Vue 3。

我有一个“地图”组件，我在其中使用 d3.js 显示图表。 在我的 Setup() 方法中，我有 onBeforeMount() 和 onMounted()。 在 onBeforeMount() 方法中，我想将 Firestore 数据库中的数据用于图表中的值。第 47 行的 console.log 正确显示了数据。 在 onMounted() 中，我打算放置我的 d3 图表。但是当我尝试访问第 55 行的 console.log 中的数据时，我得到了 undefined...

理想情况下，从“地图”组件中，我想从我的数据库中获取数据并使用它来创建图表，然后让组件呈现图表。 然后我将拥有另一个名为“MapSettings”的组件，它将能够更改“Map”中的数据，例如过滤器等......并在图表中自动更新值。 最后，两个组件都将是兄弟组件，并且具有相同的父组件。所以“地图”和“地图设置”在同一层次。

但首先我需要了解为什么我会变得不确定。任何帮助或建议将不胜感激！

Answer 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 将在该钩子中执行的函数。确实，这非常好，因为暂停钩子根本没有效率。