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 at onBeforeMount().

另一方面，您在 onMounted() 处声明了一个普通函数，试图访问一个 ref 的值，这将导致 undefined 因为当 onMounted 被调用时，您在 onBeforeMount() 定义的函数没有完成执行（或者它在事件队列中）。

这就是为什么您首先看到来自 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...
  })
}

请记住，您不能暂停异步等待生命周期挂钩。您暂停的是 Vue 将在该钩子中执行的函数。确实，这真的很好，因为暂停挂钩根本没有效率。

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

Vue 3 composition API, undefined variable, lifecycle

vue.js

vue-component

vuejs3

vue-composition-api