延迟 Vue.JS 组件加载，直到 promise 被解决答案

【问题标题】：Delay Vue.JS component loading until promise is resolved延迟 Vue.JS 组件加载，直到 promise 被解决
【发布时间】：2018-03-25 16:29:07
【问题描述】：

我在我正在构建的 Vue.JS 应用程序中广泛使用 libsodium.js。 Libsodium.js 不能立即使用，它会进行一些异步加载。

因为我几乎在每个 .vue 组件中都使用这个库，所以我需要延迟 Vue 中的实际组件加载，直到 libsodium 完全加载。

我在想象这样的事情：

// My root component
const app = new Vue({
    data() {
        return {
            sodium: null
        }
    },
    el: '#app',
    components: { ... },
    router,
    created() {
        const _sodium = require('libsodium-wrappers');
        (async() => {
            await _sodium.ready;
            this.sodium = _sodium;

            // Start loading the vue-router routes (and thus my components) here
            startLoadingComponents();
        })();
    }
});

最好的方法是什么？

【问题讨论】：

v-if="sodium"
@RoyJ 据我所知，即使模板是 v-if-ed，组件脚本仍然会被执行。此外，我更喜欢单一的全局解决方案，而不是 50 个组件中的 v-if。
它会是你的根组件模板中的一个v-if。
v-if 是@RoyJ 所说的最有用的选项。只要把 v-if 你的根组件（也许路由器视图）你会没事的。

标签： javascript asynchronous encryption vue.js libsodium

【解决方案1】：

重构您的代码，以便在钠准备好之前不会创建 Vue。

const _sodium = require('libsodium-wrappers');

function startLoadingComponents(){
  const app = new Vue({
      data() {
          return {
              sodium: _sodium
          }
      },
      el: '#app',
      components: { ... },
      router,
  });  
}

(async() => {
  await _sodium.ready;

  // Start loading the vue-router routes (and thus my components) here
  startLoadingComponents();
  // you could also just really do the new Vue right here...
})();

【讨论】：