Question

created事件中的应用程序对服务器执行AJAX请求以获取状态。在mounted事件App fire onLoad回调中，状态允许开发人员决定下一步该做什么。

取决于状态App应重定向用户或显示消息。在AJAX进行之前，用户应该看到加载图标。

这是异步问题。在created事件中，已发送请求且应用已解雇mounted，但请求仍在后台运行。并且Developer接收默认状态。

如何等待来自后端的状态，并且仅在火灾mounted事件后等待？

Answer 1

如果您真的觉得需要延迟安装周期：在查看生命周期here时，它会说明是否没有＆＃39; el＆＃39;组件上的选项，然后您可以使用vm。$ mount（el）手动调用mount。

但是，您是否可以使用beforeUpdate生命周期钩子？因此，不是延迟mount函数（延迟安装组件似乎是一个坏主意），而是返回触发beforeUpdate的请求数据？

Answer 2

处理此方案的更好方法是在NavigationGuards中使用vue-router。

beforeRouteEnter有助于确定是否应加载与路由器关联的特定组件，或者在加载组件之前必须将其导航到另一个路由。

beforeRouteEnter附带下一个处理程序。仅在调用next时，才会加载组件。这个警卫是AJAX请求的完美区域。

next()/next(true) - 继续导航。这可以在诺言解决时使用

next(false) - 不会发生导航。

 beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },

路由导航由beforeRouteEnter guard组件确定后，可以调用created() or mounted()等生命周期挂钩进行进一步操作

参考： https://router.vuejs.org/en/advanced/navigation-guards.html

Answer 3

另一个简单的方法是使用v-if，如下所示：

<div class="status" v-if="requestDone">status</div>
<div class="loading" v-else>loading</div>

在js：

data() {
    return {
        requestDone: false
    }
}

created() {
    promise.then(() => {
        ...
        this.requestDone = true
    })
}

状态换行将呈现，直到requestDone变为true。

如何延迟挂载的事件

3 个答案: