Question

我在规划器上有一些组件需要一点时间来加载他们需要的数据。使用发生的是他们每个都会依次加载，我会看到每天都会在加载时出现在规划器上。现在，我看到一个白色屏幕，直到所有组件已加载。我认为这可能是因为我的vue版本升级了（我无法确定，因为我已经转移到不同的UI框架，因此进行了大量更改）

这是组件渲染（我尽可能地愚弄了我的例子）：

<div
  v-for="(date, index) in plannerDates"
>
  <planner-day
    :date="date.date"
    class="day-container col-xs-12 col-sm-4 col-md-3 col-xl-2-mod"
    :key="index"
  />
</div>

plannerDates以[]开头，但基于2个日期过滤器加载。简而言之，它就像loop - this.plannerDates.push(someMoment)

在planner-day组件的已创建事件中，我调用了一些相对需要一段时间来处理的方法：

created () {
  this.loadDay(this.date)
  this.dataLoaded = true
  console.log('Day loaded: %s', this.date.format('DD/MM/YYYY'))
},

我看到控制台日志出现的时间间隔各有四分之一秒左右，所以我也期待我的组件在页面上显示四分之一秒的差距，但我看到的只是它们出现在一起。

注意：如果我将控制台日志添加到mounted ()我看到所有创建的第一个然后已安装，所以我希望这是问题，但我怎么能让Vue挂载每个组件依次？

Answer 1

虽然对我的应用程序进行了无关的更改，但我将loadDay()方法包含在一个promise中，这又导致组件一个接一个地呈现。看起来这些方法需要能够以异步方式运行才能以我期望的方式一个接一个地渲染（现在我认为它是有道理的。）

考虑到这一点，设置已创建的方法可以解决问题：

created () {
  Promise.resolve().then(() => {
    this.loadDay(this.date)
    this.dataLoaded = true
    console.log('Day loaded: %s', this.date.format('DD/MM/YYYY'))
  })
},

列表渲染等待直到创建所有组件 - 我希望它们逐个出现

1 个答案: