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

Question

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

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

我有一个“地图”组件，其中使用 d3.js 来显示图表。在我的 Setup() 方法中，我有 onBeforeMount() 和 onMounted()。在 onBeforeMount() 方法中，我想使用 Firestore 数据库中的数据作为图表中的值。第 47 行的 console.log 正确显示了数据。在 onMounted() 中，我计划放置 d3 图表。但是当我尝试访问 console.log 第 55 行中的数据时，我得到了未定义的信息...

理想情况下，我想从“地图”组件中从数据库中获取数据并使用它来创建图表，然后让组件渲染图表。然后我会有另一个名为“MapSettings”的组件，它将能够更改“Map”中的数据，例如过滤器等...并在图表中自动更新值。最后，两个组件将是兄弟组件并且具有相同的父组件因此“Map”和“MapSettings”处于同一层次结构级别。

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

Answer 1

你的生命周期钩子看起来不错。您面临的问题与异步执行的代码和同步执行的代码有关。

您正在声明一个使用异步等待功能的函数。该函数将异步执行。在本例中，您将从 Firestore 获取数据并将其存储在位于 的ref中onBeforeMount()。

另一方面，您在onMounted()尝试访问ref 的值时声明了一个普通函数，这将导致undefined您定义的函数在调用onBeforeMount()时未完成其执行（或者它位于事件队列中） 。onMounted

这就是为什么您首先看到console.log来自 的onMounted。

一种解决方案是将这两个函数合并到一个生命周期挂钩中并使用async wait：

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 将在该 hook 中执行的函数。事实上，这真的很好，因为暂停钩子根本没有效率。