Vue.js 显示加载微调器，直到页面中的所有子组件都已呈现-Nativescript

当我从一页转到另一页时，我试图显示一个活动指示器。目标页面包含许多组件，加载需要时间。这就是为什么当所有子组件都被加载时，我需要一些方法来监听，并在那一刻告诉我的变量isBussy为false

从“~/components/Component1”导入组件1
从“~/components/Component2”导入组件2
从“~/components/Component3”导入Component3
从“~/components/Component4”导入组件4
导出默认值{
数据（）{
返回{
伊斯布西：是的
}
},
安装的（）{
此.$nextTick（函数（）{
//仅在
//整个视图已重新渲染
this.isBussy=false
})
}
}

此代码不起作用，因为一旦上一页中的导航指示为：

@tap=“$goto（'otherPage'，{props:{foo:bar}}）”

它仍然停留在初始页面上，所有组件开始在目标页面的后台加载，但不显示父页面，只有在整个流程结束时才更改为此，并且从不按预期显示/隐藏活动指示器

顺便说一句，当我请求并用承诺处理它们时，这种预期的行为会完美地工作，然后我打开或关闭状态中的变量，它就会工作。但是我不能在页面之间的导航中复制这种行为，也不能监听加载所有组件

if (this.dataLoaded) { this.$emit('loadedAndRendered') }

编辑 最后，我通过在互联网上发现的一个小技巧实现了我想要的行为

mounted（）{
设置超时（（）=>{
this.isBussy=false
}, 500)
},

---

这导致所有子组件的渲染只延迟了一点，因此显示了活动指示器，但不会产生太多的结果，即没有检测到else块中包含的任何组件并开始渲染。我认为这里有两个主要想法需要理解。我将描述两者

1.获取数据而不阻塞渲染的通用技术 听起来您在父组件级别理解了这一概念，但随后又在询问如何对该页面包含的子组件执行非常类似的操作

我处理这个问题的方式是在我的组件中，我将数据默认为孤岛加载状态。然后，在

beforeMount（）

或

mounted（）

中，我执行异步操作并对页面数据进行必要的更改

当我们查看子组件时，问题变得完全是递归的。您希望确保您的子组件正在呈现，并且需要在其实现中进行的任何长时间运行的数据获取只会导致它们在获取完成后重新呈现。

以下是一个工作示例： 本例使用Nuxt。除了添加fetch（）和asyncData（）方法外，其余的Vue生命周期挂钩在这里是相同的

我使用

newpromise

和

setTimeout

来演示一个使用承诺且异步的操作。（例如，

axios.get（…）

）

About页面加载，而

beforeMount（）

lifecycle钩子以不阻止页面呈现的方式执行异步获取

我使用

beforeMount（）

钩子，因为根据here（），它是我们在页面数据处于反应状态时可以访问的第一个生命周期钩子。（因此，如果模板中使用了

{{myDataProp}}

，则修改

this.myDataProp

将触发重新呈现）

我还包括了一个子组件，我特意让它的数据加载时间延长了一倍。由于我再次让组件立即呈现，然后在适当的生命周期挂钩中处理数据的获取/更新，因此我可以管理最终用户何时感知到要加载的页面

在我的工作示例中，

LongLoadingComponent

采用了与About页面相同的技术

一旦您了解了如何使用

beforeMount（）

或

mounted（）

获取数据，然后更新状态，我认为关键在于花点时间真正考虑组件的默认状态。当它第一次呈现时，在完成任何数据获取/长时间运行操作之前，用户应该看到什么

一旦确定了默认（尚未加载）组件的外观，请尝试将其呈现在屏幕上，然后再添加获取和更新状态数据的逻辑

2.侦听子组件从父组件完成渲染的时间 这使用了上述技术，但包括使用

updated（）

hook并发出自定义事件（ )

如果确实希望在子组件完成渲染时侦听，可以在

updated（）

钩子中

$emit

自定义事件。可能是这样的（在您的子组件中）

因此，当子对象的异步操作完成时，它可以将其

dataLoaded

属性翻转为true。如果在孩子的

某处使用了

dataLoaded

，那么组件应该重新渲染（因为它处于“完成”状态）。当子对象重新呈现时，将触发

updated（）

挂钩。（同样，请参见：）我包含了

if（this.dataLoaded）

部分，只是为了处理中间数据更新期间可能调用

updated（）

hook的情况。（如果子级加载数据/更新完成，我们只希望发出

loadedandrended

事件。）

3.关于通用nuxt应用程序的其他注意事项 直到我写下这个答案，我才意识到你没有使用Nuxt。不过，我添加了这个，以防其他Nuxt用户碰巧遇到这个问题

我加上这个教派